搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

Minimalist_Tooltip

用于电子商务的极简/平面设计工具提示框组件，具有响应式设计和深色主题支持。使用 Complementary color scheme 并具有中等复杂度。

                <div class="relative group">
  <button class="text-blue-700 hover:text-blue-800 dark:text-red-400 dark:hover:text-red-500 font-bold py-2 px-4 rounded">Hover Me</button>
  <div class="absolute bottom-full mb-2 hidden group-hover:block w-48 bg-blue-100 text-blue-800 text-sm rounded py-1 px-2 dark:bg-red-900 dark:text-red-100">
    Product information or details here.
  </div>
</div>

使用 3D 设计的电子商务布局

具有 3D 设计元素的电子商务响应式 Web 组件布局，结合了互补的配色方案和深色主题支持。它具有产品卡、导航栏和页脚，所有这些都使用 Tailwind CSS 设置样式。

打开预览

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
  <nav class="flex justify-between items-center py-4">
    <div class="text-2xl font-bold text-gray-900 dark:text-white">ShopLogo</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Home</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Products</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Contact</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Cart</a></li>
    </ul>
  </nav>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=1" alt="Product 1" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 1</h2>
        <p class="text-gray-700 dark:text-gray-300">$19.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=2" alt="Product 2" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 2</h2>
        <p class="text-gray-700 dark:text-gray-300">$29.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=3" alt="Product 3" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 3</h2>
        <p class="text-gray-700 dark:text-gray-300">$39.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
  </div>
  <footer class="mt-6 p-4 bg-gray-200 dark:bg-gray-600 rounded-lg text-center text-gray-800 dark:text-gray-300">
    <p>© 2023 E-commerce Store. All rights reserved.</p>
  </footer>
</div>

360° 查看器组件

响应式 360° 查看器组件，具有拟物化设计、三元配色方案和深色主题支持。专为仪表板数据可视化和控制面板而设计。

打开预览

                <div class="flex flex-col items-center justify-center dark:bg-gray-800 bg-gray-200 min-h-screen p-5">
    <h2 class="text-3xl font-bold mb-5 text-gray-900 dark:text-white">360° Viewer</h2>
    <div class="relative w-full max-w-xl">
        <div class="overflow-hidden rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
            <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-auto transition-transform duration-500 ease-in-out transform hover:scale-105" />
            <div class="absolute inset-0 flex items-center justify-center">
                <button class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200">Rotate Left</button>
                <button class="bg-green-500 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200 ml-4">Rotate Right</button>
            </div>
        </div>
    </div>
    <div class="flex justify-between w-full max-w-xl mt-4">
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
    </div>
</div>

Retro Pastel 聊天窗口

一个复古主题的聊天窗口组件，具有柔和的色彩、响应式设计和使用 Tailwind CSS 的深色模式支持。

打开预览

                <div class="flex flex-col h-screen antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <div class="flex flex-row h-full w-full overflow-x-hidden">
    <div class="flex flex-col flex-auto h-full p-6">
      <div class="flex flex-col flex-auto flex-shrink-0 rounded-lg bg-gray-200 dark:bg-gray-800 h-full p-4">
        <div class="flex flex-col h-full overflow-x-auto mb-4">
          <div class="flex flex-col h-full">
            <div class="grid grid-cols-12 gap-y-2">
              <div class="col-start-1 col-end-8 p-3 rounded-lg">
                <div class="flex flex-row items-center">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    A
                  </div>
                  <div
                    class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
                  >
                    <div>Hey How are you doing today?</div>
                  </div>
                </div>
              </div>
              <div class="col-start-1 col-end-8 p-3 rounded-lg">
                <div class="flex flex-row items-center">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    A
                  </div>
                  <div
                    class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
                  >
                    <div>
                      Wow, I'm loving this retro chat window design! The pastel colors are so calming.
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-start-6 col-end-13 p-3 rounded-lg">
                <div class="flex items-center justify-start flex-row-reverse">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    B
                  </div>
                  <div
                    class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
                  >
                    <div>I'm fine living large</div>
                  </div>
                </div>
              </div>
              <div class="col-start-6 col-end-13 p-3 rounded-lg">
                <div class="flex items-center justify-start flex-row-reverse">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    B
                  </div>
                  <div
                    class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
                  >
                    <div>Looks like something out of a late 80s computer interface. Totally tubular!</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="flex flex-row items-center h-16 rounded-xl bg-white dark:bg-gray-700 w-full px-4"
        >
          <div class="flex-grow ml-4">
            <div class="relative w-full">
              <input
                type="text"
                class="flex w-full border rounded-xl focus:outline-none focus:border-indigo-300 pl-4 h-10 dark:bg-gray-800 dark:text-white"
              />
            </div>
          </div>
          <div class="ml-4">
            <button
              class="flex items-center justify-center bg-indigo-500 hover:bg-indigo-600 rounded-xl text-white px-4 py-1 flex-shrink-0"
            >
              <span>Send</span>
              <span class="ml-2">
                <svg
                  class="w-4 h-4 transform rotate-45 -mt-px"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
                  ></path>
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

功能组件

极简的仪表板功能组件，具有响应式设计和深色主题支持。

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white p-4 sm:p-6 lg:p-8">
    <div class="container mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Total Users</h2>
                <p class="text-3xl font-bold">1500</p>
            </div>
            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Revenue</h2>
                <p class="text-3xl font-bold">$5000</p>
            </div>
            <!-- Card 3 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Orders</h2>
                <p class="text-3xl font-bold">300</p>
            </div>
        </div>
    </div>
</div>

BrutalistGrayscaleProgressBar （粗野灰度进度条）

用于博客内容的野兽派风格的灰度进度条，具有简单的设计、深色模式支持和响应能力。

打开预览

                <div class="w-full bg-gray-800 h-4 dark:bg-gray-200">
  <div class="bg-gray-400 h-4 dark:bg-gray-600" style="width: 50%;"></div>
</div>

Mega Menu 组件

具有极简/扁平化设计、充满活力的配色方案、复杂复杂性级别的大型菜单组件，用于仪表板用途，使用 Tailwind CSS。支持深色主题的响应式设计。没有 JavaScript 代码，只有带有 Tailwind 类的 HTML。深色模式使用 Tailwind 的 dark：前缀进行样式设置。图像使用 picsum.photos 和 randomuser.me 作为头像。

打开预览

                <nav class="bg-white shadow-lg dark:bg-gray-800">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center py-4">
            <div>
                <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</a>
            </div>
            <div class="hidden md:flex items-center space-x-1">
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Home</a>
                <div class="relative group">
                    <button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Products</button>
                    <div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
                    </div>
                </div>
                <div class="relative group">
                    <button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Services</button>
                    <div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
                    </div>
                </div>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">About</a>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Contact</a>
            </div>
            <div class="md:hidden flex items-center">
                <button class="mobile-menu-button">
                    <svg class="w-6 h-6 text-gray-500 hover:text-green-500 dark:text-gray-200 dark:hover:text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="mobile-menu hidden md:hidden bg-white dark:bg-gray-800">
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Home</a>
        <div class="relative group">
            <button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Products</button>
            <div class="relative bg-white dark:bg-gray-700">
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
            </div>
        </div>
        <div class="relative group">
            <button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Services</button>
            <div class="relative bg-white dark:bg-gray-700">
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
            </div>
        </div>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">About</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Contact</a>
    </div>
</nav>

登录表单组件

拟物化登录表单组件，设计具有鲜艳的色彩和适度的复杂度，适用于投资组合。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-3xl font-bold text-center text-vibrant-600 dark:text-vibrant-300 mb-6">Login</h2>
        <img src="https://picsum.photos/200/100" alt="Decorative Header Image" class="rounded-lg w-full mb-4" />
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" name="email" class="border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:outline-none focus:ring focus:ring-vibrant-300 dark:focus:ring-vibrant-500 w-full" required />
            </div>
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" name="password" class="border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:outline-none focus:ring focus:ring-vibrant-300 dark:focus:ring-vibrant-500 w-full" required />
            </div>
            <button type="submit" class="bg-vibrant-600 dark:bg-vibrant-500 text-white font-bold py-2 rounded-lg w-full hover:bg-vibrant-700 dark:hover:bg-vibrant-400 transition duration-300 ease-in-out">Log In</button>
        </form>
        <div class="flex items-center justify-between mt-4">
            <a href="#" class="text-sm text-vibrant-600 dark:text-vibrant-300 hover:underline">Forgot Password?</a>
            <a href="#" class="text-sm text-vibrant-600 dark:text-vibrant-300 hover:underline">Sign Up</a>
        </div>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mx-auto mt-4" />
    </div>
</div>

目录组件

响应式目录组件，具有拟物化设计、柔和的配色方案和深色模式支持，适用于投资组合。

打开预览

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-xl">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Table of Contents</h2>
  <ul class="space-y-2">
    <li>
      <a href="#section1" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 1: Introduction</span>
      </a>
    </li>
    <li>
      <a href="#section2" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 2: Projects</span>
      </a>
    </li>
    <li>
      <a href="#section3" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 3: Skills</span>
      </a>
    </li>
    <li>
      <a href="#section4" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 4: Contact</span>
      </a>
    </li>
  </ul>
</div>

360° 查看器组件

一个简单的 360° 查看器组件，专为电子商务而设计，具有微交互和大地色调配色方案，并支持深色模式。

打开预览

                <div class="max-w-xl mx-auto p-4">
    <h2 class="text-2xl font-bold text-brown-800 dark:text-brown-300 mb-4">Product 360° Viewer</h2>
    <div class="relative w-full h-72 overflow-hidden rounded-lg shadow-lg border border-brown-200 dark:border-brown-700">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="object-cover h-full w-full transition-transform duration-300 ease-in-out hover:scale-105">
        <div class="absolute inset-0 flex items-center justify-center">
            <button class="bg-brown-600 text-white font-semibold rounded-full px-4 py-2 transition-transform duration-300 ease-in-out transform hover:scale-110 dark:bg-brown-700">Rotate</button>
        </div>
    </div>
    <div class="mt-4">
        <h3 class="text-xl font-semibold text-brown-700 dark:text-brown-200">Product Name</h3>
        <p class="text-brown-600 dark:text-brown-400">This is a brief description of the product. It is made from high-quality materials and is perfect for your needs.</p>
        <div class="flex items-center mt-2">
            <span class="text-lg font-bold text-brown-800 dark:text-brown-300">$49.99</span>
        </div>
    </div>
</div>

1 ... 158 159 160 161 162 ... 335