搜索组件

类别

组件表单

表单

用户输入收集字段的集合

表单组件

一个复杂的响应式表单组件，支持黑暗主题，适用于社交媒体界面，采用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>

表单组件

一个采用材料设计风格的响应表单组件，使用 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>