搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

电子商务组件

一个响应式电子商务组件，采用 Glassmorphism 和 Pastel 颜色设计，适用于社交媒体界面，支持深色主题。

                <div class="flex flex-col items-center justify-center p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-lg bg-opacity-30">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-3">Featured Products</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/300" alt="Product 1" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$19.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/301" alt="Product 2" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$29.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/302" alt="Product 3" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$39.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
    </div>
    <div class="mt-5 flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-2">
            <div class="text-left">
                <p class="text-gray-800 dark:text-gray-200 font-bold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Great product! Highly recommend.</p>
            </div>
        </div>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-2">
            <div class="text-left">
                <p class="text-gray-800 dark:text-gray-200 font-bold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Loved it! Will buy again.</p>
            </div>
        </div>
    </div>
</div>

标签云组件

专为深色模式 UI 设计的响应式标签云组件，展示了具有类似配色方案的产品组合。

打开预览

                <div class="bg-gray-900 text-gray-300 p-4 rounded-lg">
    <h2 class="text-xl font-bold mb-4">Tag Cloud</h2>
    <div class="flex flex-wrap gap-2">
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#WebDesign</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#UI/UX</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Development</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Branding</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Photography</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Illustration</span>
        <span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Typography</span>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Featured Work</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
                <img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=1" alt="Portfolio Item" />
                <div class="p-4">
                    <h4 class="font-bold">Project Title 1</h4>
                    <p class="text-gray-400">Short description of the project.</p>
                    <div class="flex items-center mt-2">
                        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
                        <span class="ml-2 text-sm">by Author Name</span>
                    </div>
                </div>
            </div>
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
                <img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=2" alt="Portfolio Item" />
                <div class="p-4">
                    <h4 class="font-bold">Project Title 2</h4>
                    <p class="text-gray-400">Short description of the project.</p>
                    <div class="flex items-center mt-2">
                        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
                        <span class="ml-2 text-sm">by Author Name</span>
                    </div>
                </div>
            </div>
            <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
                <img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=3" alt="Portfolio Item" />
                <div class="p-4">
                    <h4 class="font-bold">Project Title 3</h4>
                    <p class="text-gray-400">Short description of the project.</p>
                    <div class="flex items-center mt-2">
                        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
                        <span class="ml-2 text-sm">by Author Name</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

电子商务组件

一个响应式电子商务组件，具有微交互、大地色调配色方案、中等复杂性和深色模式支持。

打开预览

                <div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row -mx-4">
      <div class="md:flex-1 px-4">
        <div class="h-[460px] rounded-lg bg-gray-300 dark:bg-gray-700 mb-4 animate-pulse"></div>
        <div class="flex -mx-2 mb-4">
          <div class="w-1/2 px-2">
            <button class="w-full bg-amber-900 dark:bg-amber-700 text-white py-2 px-4 rounded-full font-bold hover:bg-amber-800 dark:hover:bg-amber-600 transform transition duration-300 hover:scale-105">Add to Cart</button>
          </div>
          <div class="w-1/2 px-2">
            <button class="w-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-300 dark:hover:bg-gray-700 transform transition duration-300 hover:scale-105">Add to Wishlist</button>
          </div>
        </div>
      </div>
      <div class="md:flex-1 px-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Product Name Microinteraction</h2>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed
          ante justo. Integer eu eleifend erat. Quisque dapibus rupus augue,
          a dapibus velit tincidunt et. Sed sed ante justo.
        </p>

        <div class="flex mb-4">
          <div class="mr-4">
            <span class="font-bold text-gray-700 dark:text-gray-300">Price:</span>
            <span class="text-gray-600 dark:text-gray-300">$29.99</span>
          </div>
          <div>
            <span class="font-bold text-gray-700 dark:text-gray-300">Availability:</span>
            <span class="text-gray-600 dark:text-gray-300">In Stock</span>
          </div>
        </div>
        <div class="mb-4">
          <span class="font-bold text-gray-700 dark:text-gray-300">Select Color:</span>
          <div class="flex items-center mt-2">
            <button class="w-6 h-6 rounded-full bg-brown-700 dark:bg-brown-500 mr-2"></button>
            <button class="w-6 h-6 rounded-full bg-green-700 dark:bg-green-500 mr-2"></button>
            <button class="w-6 h-6 rounded-full bg-stone-700 dark:bg-stone-500"></button>
          </div>
        </div>
        <div class="mb-4">
          <span class="font-bold text-gray-700 dark:text-gray-300">Select Size:</span>
          <div class="flex items-center mt-2">
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">S</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">M</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">L</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">XL</button>
            <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">XXL</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

愿望单组件

一个响应式愿望清单组件，设计为具有拟物化元素和互补色，适用于深色主题仪表板。

打开预览

                <div class="max-w-xs mx-auto bg-gray-800 rounded-lg shadow-lg overflow-hidden dark:bg-gray-900">
    <div class="p-4">
        <h2 class="text-2xl font-bold text-white mb-2">Wishlist</h2>
        <ul class="space-y-4">
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 1</h3>
                        <p class="text-sm text-gray-400">$20.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/51" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 2</h3>
                        <p class="text-sm text-gray-400">$30.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
            <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/50/52" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" />
                    <div>
                        <h3 class="text-lg text-white">Product Name 3</h3>
                        <p class="text-sm text-gray-400">$40.00</p>
                    </div>
                </div>
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button>
            </li>
        </ul>
    </div>
</div>

添加到购物车按钮组件

响应式 Add to Cart Button 组件，采用粗野主义风格设计，色彩鲜艳，适用于支持深色主题的社交媒体界面。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 border border-red-600 dark:border-red-400 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
        <h2 class="text-2xl font-bold mb-3 text-red-600 dark:text-red-400">Add to Cart</h2>
        <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="w-full h-auto rounded-lg mb-4">
        <p class="text-lg font-medium text-gray-800 dark:text-gray-200">Check out this amazing product that you will love!</p>
        <div class="mt-5">
            <button class="bg-blue-600 dark:bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300 ease-in-out">
                Add to Cart
            </button>
        </div>
        <div class="mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-600 dark:border-red-400"> 
        </div>
    </div>
</div>

身份验证组件

一个简单的身份验证组件，采用 Neumorphism 风格和单色配色方案设计，适用于社交媒体界面。它包括一个带有电子邮件和密码字段的登录表单、一个登录按钮和一个注册链接。该组件响应迅速，并支持深色模式。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-8 w-80 neumorphism">
        <h2 class="text-center text-xl font-semibold text-gray-800 dark:text-gray-200">Login</h2>
        <form class="mt-6">
            <div class="mb-4">
                <label class="block mb-2 text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block mb-2 text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="••••••••" required>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-600">Log In</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
        <div class="flex justify-center mt-4">
            <img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        </div>
        <img src="https://picsum.photos/200/100" alt="Random Image" class="mt-4 rounded-lg shadow-lg w-full h-auto">
    </div>
</div>

<style>
.neumorphism {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2), 
                -8px -8px 16px rgba(255, 255, 255, 0.7);
    border-radius: 20px;
}
</style>

画廊组件

响应式 Gallery 组件，具有 3D 设计、相似配色方案和对社交媒体界面的深色模式支持。

打开预览

                <div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="-m-1 flex flex-wrap md:-m-2">
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=1"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=2"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=3"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=4"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=5"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
          src="https://picsum.photos/500/300?random=6"
           style="transform: translateZ(10px);"
/>
      </div>
    </div>
  </div>
</div>

价格显示组件

用于仪表板的极简/扁平设计价格显示组件，具有响应式设计和深色模式支持。

打开预览

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-xs mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Price Overview</h2>
    <div class="flex items-center justify-between mb-4">
        <span class="text-lg font-semibold text-gray-700 dark:text-gray-300">Current Price</span>
        <span class="text-2xl font-extrabold text-blue-500 dark:text-blue-300">$99.99</span>
    </div>
    <div class="flex items-center justify-between">
        <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-full">
        <div>
            <span class="text-sm text-gray-600 dark:text-gray-400">Last updated: 2 hours ago</span>
        </div>
    </div>
    <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-500">View Details</button>
</div>

跳到内容链接

一个 Skip to Content Link 组件，具有适用于商业网站的 3D 灰度设计。它是响应式的，并支持使用 Tailwind CSS 的深色模式。无 JavaScript。

打开预览

                <a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-0 a-3 focus:left-0 focus:z-50 block px-4 py-3 text-lg font-semibold text-gray-800 bg-gray-200 border-b-4 border-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-300 dark:focus:ring-gray-300">Skip to main content</a>

添加到购物车按钮

响应式“添加到购物车”按钮，具有拟物化设计、单色配色方案和深色主题支持。

打开预览

                <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded-full shadow-lg dark:shadow-xl hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 ease-in-out hover:scale-105">
  Add to Cart
</button>

1 ... 189 190 191 192 193 ... 335