양식 | Code Components Hub

Forms 구성 요소

3D 디자인의 반응형 양식 구성 요소, 유사한 색 구성표, 어두운 테마를 지원하는 전자 상거래를 위한 간단한 레이아웃

                <div class="container mx-auto p-4">

  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-xl p-6 transform hover:scale-105 transition duration-300">

    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Shipping Information</h2>



    <form>

      <div class="mb-4">

        <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>

        <input type="text" id="fullName" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="John Doe">

      </div>



      <div class="mb-4">

        <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>

        <input type="text" id="address" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="123 Main St">

      </div>



      <div class="mb-4">

        <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>

        <input type="text" id="city" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="Anytown">

      </div>



      <div class="mb-4">

        <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip Code</label>

        <input type="text" id="zip" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 transform translate-z-0 perspective-origin" placeholder="12345">

      </div>



      <div class="flex items-center justify-between">

        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform translate-z-0 perspective-origin dark:bg-blue-700 dark:hover:bg-blue-900">

          Submit Order

        </button>

      </div>

    </form>

  </div>

</div>

레트로 빈티지 양식 구성 요소

파스텔 색 구성표가 있는 레트로/빈티지 스타일로 디자인된 복잡한 양식 구성 요소로, 전문 비즈니스 웹 사이트에 적합하고 다크 모드 지원으로 반응합니다.

미리보기 열기

                <div class="bg-pastel-light dark:bg-pastel-dark p-8 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Contact Us</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="name">Name</label>
            <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Name" />
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="email">Email</label>
            <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Email" />
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="message">Message</label>
            <textarea id="message" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Message" rows="4"></textarea>
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="service">Service Inquiry</label>
            <select id="service" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline">
                <option value="consulting">Consulting</option>
                <option value="design">Design</option>
                <option value="development">Development</option>
            </select>
        </div>
        <div class="mb-6 flex items-center justify-between">
            <label class="inline-flex items-center">
                <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400" />
                <span class="ml-2 text-gray-600 dark:text-gray-400 text-sm">Subscribe to our newsletter</span>
            </label>
        </div>
        <div class="flex items-center justify-center">
            <button type="submit" class="bg-pastel-primary dark:bg-pastel-secondary hover:bg-pastel-secondary dark:hover:bg-pastel-primary text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                Send
            </button>
        </div>
    </form>
    <div class="mt-6 text-center">
        <img src="https://picsum.photos/seed/picsum/200/100" alt="Random Image" class="rounded-lg" />
    </div>
</div>

Forms 구성 요소

소셜 미디어를 위한 복잡하고 반응이 빠른 어두운 테마의 지원 양식 구성 요소는 3D 단색 디자인과 인터페이스합니다. 다크 모드에 dark: 접두사가 있는 Tailwind CSS를 사용하며 예제 양식 요소를 포함합니다.

미리보기 열기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6 flex items-center justify-center">
  <div class="container max-w-screen-lg mx-auto">
    <div>
      <h2 class="text-center text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-6">Create New Post</h2>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow complex-3d-element p-4 px-4 md:p-8 mb-6 border border-gray-300 dark:border-gray-700">
        <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 lg:grid-cols-3">
          <div class="text-gray-600 dark:text-gray-400 complex-3d-text">
            <p class="font-medium text-lg">Post Details</p>
            <p>Please fill out all the fields.</p>
          </div>
          <div class="lg:col-span-2">
            <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 md:grid-cols-5">
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Title</label>
                <input type="text" name="title" id="title" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" value="" placeholder="Post Title" />
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Content</label>
                <textarea name="content" id="content" class="h-24 md:h-32 border mt-1 rounded px-4 py-2 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" placeholder="Write your post content here..."></textarea>
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                <label for="tags" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tags</label>
                <input type="text" name="tags" id="tags" class="h-10 border mt-1 rounded px-4 w-full bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 complex-3d-input" value="" placeholder="Comma separated tags" />
              </div>
              <div class="md:col-span-5 complex-3d-input-container">
                  <label for="media" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Upload Media</label>
                  <div class="flex items-center space-x-4 mt-1">
                      <label class="flex items-center justify-center w-full h-20 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-md cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 complex-3d-upload complex-3d-input">
                          <div class="text-center">
                              <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-10 w-10 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                              </svg>
                              <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Drag and drop or click to upload</p>
                          </div>
                          <input type="file" id="media" name="media" class="hidden" />
                      </label>
                  </div>
              </div>
              <div class="md:col-span-5 text-right complex-3d-button-container">
                <div class="inline-flex items-end">
                  <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded complex-3d-button dark:bg-blue-700 dark:hover:bg-blue-800">Post</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.complex-3d-element {
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(10deg);
  transition: transform 0.3s ease-in-out;
}

.complex-3d-element:hover {
  transform: rotateX(0deg) rotateY(0deg);
}

.complex-3d-text {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.complex-3d-input-container {
  perspective: 1000px;
}

.complex-3d-input {
  transform: translateZ(20px);
  transition: transform 0.3s ease-in-out;
}

.complex-3d-input:focus {
  transform: translateZ(30px);
}

.complex-3d-button-container {
     perspective: 1000px;
}

.complex-3d-button {
     transform: translateZ(20px);
     transition: transform 0.3s ease-in-out;
}

.complex-3d-button:hover {
     transform: translateZ(30px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.complex-3d-upload {
    backface-visibility: hidden;
}
</style>

브루탈리스트 양식 구성 요소

파스텔 색상을 사용하여 브루탈리즘 미학으로 디자인된 양식 구성 요소이며 비즈니스/기업 웹 사이트에 적합합니다. 어두운 테마를 지원하는 반응형 디자인이 특징입니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-400 mb-4">Contact Us</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="text" id="name" placeholder="Your Name" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="email" id="email" placeholder="Your Email" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="message">Message</label>
            <textarea class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" id="message" rows="4" placeholder="Your Message" required></textarea>
        </div>
        <div class="flex items-center justify-between">
            <button type="submit" class="bg-pink-600 text-white font-bold py-2 px-4 rounded hover:bg-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 dark:bg-pink-500 dark:hover:bg-pink-400">Send</button>
        </div>
    </form>
    <div class="mt-6 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <p class="text-gray-600 dark:text-gray-300">Stay connected with us!</p>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="rounded-md shadow-md object-cover w-full">
    </div>
</div>

미니멀리스트 양식 구성 요소

포트폴리오에 맞게 조정된 미니멀리스트 양식 구성 요소로, 파스텔 색상 구성표, 단순한 레이아웃, 반응형 디자인 및 Tailwind CSS를 사용한 다크 모드 지원을 특징으로 합니다.

미리보기 열기

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-800 dark:to-gray-900 p-6">
  <div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Get in Touch</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
        <input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white">
      </div>
      <div class="mb-6">
        <label for="message" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
        <textarea id="message" name="message" rows="4" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white"></textarea>
      </div>
      <button type="submit" class="w-full bg-blue-400 dark:bg-blue-700 text-white py-2 px-4 rounded-md hover:bg-blue-500 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-200">Send Message</button>
    </form>
  </div>
</div>

레트로/빈티지 양식 구성 요소

80년대와 90년대에서 영감을 받은 레트로/빈티지 미학으로 스타일링된 양식 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

미리보기 열기

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Contact Us</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" for="name">Name</label>
            <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter your name" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" for="email">Email</label>
            <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter your email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" for="message">Message</label>
            <textarea id="message" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" rows="4" placeholder="Your message..." required></textarea>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-1" for="avatar">Upload Avatar</label>
            <input type="file" id="avatar" class="block w-full text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none" accept="image/*" />
        </div>
        <div class="mb-6">
            <img src="https://picsum.photos/200/300" alt="Random Placeholder" class="rounded-md w-full mb-2" />
        </div>
        <div class="flex items-center justify-between">
            <button type="submit" class="bg-indigo-600 text-white font-bold py-2 px-4 rounded-full hover:bg-indigo-700 focus:outline-none focus:shadow-outline">Submit</button>
        </div>
    </form>
    <p class="text-gray-600 dark:text-gray-400 text-sm text-center mt-4">© 2023 Nostalgic Designs. All rights reserved.</p>
</div>

머티리얼 디자인 양식 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 원칙에 따라 설계된 반응형 양식 구성 요소로, 다크 모드를 지원합니다.

미리보기 열기

                <div class="container mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Contact Us</h2>
    <form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8">
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
            <input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="name" type="text" placeholder="Your Name" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
            <input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="email" type="email" placeholder="Your Email" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="message">Message</label>
            <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="message" rows="4" placeholder="Your Message" required></textarea>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300">Avatar</label>
            <img class="rounded-full w-20 h-20 mb-2 border border-gray-300" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        </div>
        <button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Submit</button>
    </form>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1E1E2F;
        }
    }
</style>

Forms 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 스타일로 디자인된 반응형 양식 구성 요소로, 그리드 레이아웃, 그림자 및 다크 모드 지원을 제공합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Us</h2>
    <form>
        <div class="grid grid-cols-1 gap-4">
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
                <input type="text" id="name" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Name">
            </div>
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Email">
            </div>
            <div>
                <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
                <textarea id="message" rows="4" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Message"></textarea>
            </div>
            <div class="flex items-center">
                <input type="checkbox" id="subscribe" class="mr-2 leading-tight">
                <label for="subscribe" class="text-sm text-gray-600 dark:text-gray-400">Subscribe to our newsletter</label>
            </div>
            <button type="submit" class="w-full mt-4 bg-indigo-600 text-white py-2 rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 dark:focus:ring-indigo-400">Submit</button>
        </div>
    </form>
    <div class="mt-6 flex justify-center">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md">
    </div>
    <div class="mt-4 flex justify-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg">
    </div>
</div>

카테고리

양식