所有组件

产品比较组件

一个使用 Tailwind CSS 设计的拟物化产品比较组件，具备响应式效果和深色主题支持。

                <div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="w-full md:w-1/2 p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product A</h2>
        <img src="https://picsum.photos/300/200?random=1" alt="Product A" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ex non quam cursus vestibulum.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 1</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 2</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 3</span>
        </div>
    </div>
    <div class="w-full md:w-1/2 p-6 border-l border-gray-300 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product B</h2>
        <img src="https://picsum.photos/300/200?random=2" alt="Product B" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Suspendisse tincidunt, nunc id congue euismod, arcu enim cursus diam, in imperdiet urna risus quis eros.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature A</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature B</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature C</span>
        </div>
    </div>
</div>

购物车组件

一个使用 Tailwind CSS 设计的 3D 购物车组件，具备响应式效果和深色主题支持。

打开预览

                <div class='bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md mx-auto transform transition-all duration-300 hover:scale-105'>
    <h2 class='text-xl font-semibold text-gray-800 dark:text-white'>Shopping Cart</h2>
    <ul class='mt-4 space-y-4'>
        <li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
            <img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
            <div class='flex-grow pl-4'>
                <h3 class='text-gray-800 dark:text-white font-medium'>Product Name</h3>
                <p class='text-gray-600 dark:text-gray-300'>$19.99</p>
            </div>
            <button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
        </li>
        <li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
            <img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
            <div class='flex-grow pl-4'>
                <h3 class='text-gray-800 dark:text-white font-medium'>Another Product</h3>
                <p class='text-gray-600 dark:text-gray-300'>$29.99</p>
            </div>
            <button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
        </li>
    </ul>
    <div class='mt-6 flex justify-between items-center'>
        <span class='text-gray-800 dark:text-white text-lg'>Total:</span>
        <span class='text-gray-800 dark:text-white text-lg font-semibold'>$49.98</span>
    </div>
    <button class='mt-5 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition'>Proceed to Checkout</button>
</div>

360°查看器组件

一个使用 Tailwind CSS 设计的极简主义 360° 查看器组件，具有响应式效果和深色主题支持。

打开预览

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">360° Viewer</h2>
    <div class="overflow-hidden rounded-lg w-full max-w-md">
        <img src="https://picsum.photos/600/400?random" alt="360° view" class="w-full transition-transform duration-500 transform hover:scale-105" />
    </div>
    <p class="mt-4 text-gray-600 dark:text-gray-300 text-center">Hover to see the view.</p>
    <div class="mt-6 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
    </div>
</div>

电子商务拟态组件

一个以拟物化风格设计的响应式电子商务组件，支持 Tailwind CSS 的深色主题.

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
  <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 w-full max-w-sm">
    <img class="rounded-t-lg mb-4" src="https://picsum.photos/400/200" alt="Product Image" />
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Product description goes here. This is a brief overview of the product features and benefits.</p>
    <div class="flex items-center justify-between mb-4">
      <span class="text-gray-800 dark:text-white font-bold text-lg">
        $29.99
      </span>
      <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white rounded-full py-2 px-4 shadow-md hover:shadow-lg active:shadow-sm transition duration-300">
        Add to Cart
      </button>
    </div>
    <div class="flex items-center">
      <img class="rounded-full w-10 h-10 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <span class="text-gray-600 dark:text-gray-300">Seller Name</span>
    </div>
  </div>
</div>

面包屑导航组件

一个使用 Tailwind CSS 的响应式面包屑导航组件，采用玻璃体设计风格。具有模糊的玻璃背景，支持深色主题，并包含占位符图像.

打开预览

                <div class="bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg p-4 mb-6">
    <nav class="flex" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">
                    <img src="https://picsum.photos/20/20?random=1" alt="Home" class="w-5 h-5 rounded-full mr-2">
                    Home
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Category</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Subcategory</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <span class="ml-1 text-sm font-medium text-gray-700 dark:text-gray-200">Current Page</span>
                </div>
            </li>
        </ol>
    </nav>
</div>

热力图组件

一个以粗犷主义风格设计的热力图组件，具有高对比度和独特布局，使用 Tailwind CSS。它支持响应式效果和深色主题.

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-3xl text-gray-900 dark:text-white font-extrabold mb-4">Heat Maps</h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="relative bg-red-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">20%</div>
        </div>
        <div class="relative bg-yellow-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-black font-bold text-lg">50%</div>
        </div>
        <div class="relative bg-green-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">75%</div>
        </div>
        <div class="relative bg-blue-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">40%</div>
        </div>
        <div class="relative bg-purple-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">90%</div>
        </div>
        <div class="relative bg-gray-600 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">60%</div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-2xl text-gray-900 dark:text-white font-bold mb-2">User Avatars</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
        </div>
    </div>
</div>
<div class="hidden dark:block bg-gray-900 h-32 text-center flex items-center justify-center text-white font-bold text-xl">Dark Mode Active</div>

登录表单组件

一个响应式登录表单组件，采用玻璃体风格设计，结合磨砂玻璃效果、模糊效果，并支持 Tailwind CSS 的深色模式.

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 shadow-lg rounded-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="password" id="password" placeholder="********" required>
            </div>
            <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-300" type="submit">Login</button>
        </form>
        <p class="text-center text-gray-600 dark:text-gray-400 mt-4">Or log in with</p>
        <div class="flex justify-around mt-4">
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=1" alt="Google"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=2" alt="Facebook"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=3" alt="Twitter"></a>
        </div>
    </div>
</div>

网站地图组件

一个复古/怀旧风格的站点地图组件，具有响应式效果和深色主题支持.

打开预览

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Site Map</h2>
    <ul class="space-y-4">
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">Home</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">About Us</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">Services</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">Contact</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
    </ul>
</div>

拟物化标签组件

一个使用拟物化风格的响应式标签组件，利用 Tailwind CSS 模仿现实世界的设计元素。它包括深色主题支持和占位符图像.

打开预览

                <div class="flex flex-col w-full max-w-md mx-auto p-4">
  <div class="tabs flex space-x-2">
    <button class="tab px-4 py-2 font-semibold text-white bg-gray-800 rounded-lg shadow-lg focus:outline-none ">Tab 1</button>
    <button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 2</button>
    <button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 3</button>
  </div>
  <div class="tab-content mt-4 p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800">
    <div class="flex items-center space-x-4">
      <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
      <div class="text-gray-700 dark:text-gray-300">
        <h2 class="font-bold text-lg">Tab 1 Content</h2>
        <p>This section contains information related to Tab 1.</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" />
      </div>
    </div>
  </div>
</div>
<style>
  /* Dark Mode Support */
  @media (prefers-color-scheme: dark) {
    .bg-gray-800 { background-color: #2d3748; }
    .bg-gray-200 { background-color: #4a5568; }
    .text-gray-700 { color: #cbd5e0; }
  }
</style>

过滤器组件

一个使用 Tailwind CSS 的粗犷主义过滤器组件，具有响应式设计、深色主题支持，并包含图片和头像的占位符.

打开预览

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col gap-4">
  <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Filters</h2>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Category:</label>
    <select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
      <option>All</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Music</option>
      <option>Technology</option>
    </select>
  </div>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Price Range:</label>
    <input type="range" min="0" max="100" class="border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg p-2" />
  </div>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Rating:</label>
    <select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
      <option>All</option>
      <option>1 Star</option>
      <option>2 Stars</option>
      <option>3 Stars</option>
      <option>4 Stars</option>
      <option>5 Stars</option>
    </select>
  </div>
  <div class="flex justify-between">
    <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">Reset</button>
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg">Apply Filters</button>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Users</h3>
    <div class="grid grid-cols-2 gap-4">
      <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
        <div>
          <h4 class="font-semibold">John Doe</h4>
          <p class="text-gray-600 dark:text-gray-300">Photographer</p>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/women/80.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
        <div>
          <h4 class="font-semibold">Jane Smith</h4>
          <p class="text-gray-600 dark:text-gray-300">Artist</p>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Works</h3>
    <div class="grid grid-cols-1 gap-4">
      <img src="https://picsum.photos/200/150?random=1" alt="Featured Work" class="rounded-lg shadow-md" />
      <img src="https://picsum.photos/200/150?random=2" alt="Featured Work" class="rounded-lg shadow-md" />
      <img src="https://picsum.photos/200/150?random=3" alt="Featured Work" class="rounded-lg shadow-md" />
    </div>
  </div>
</div>

类别