搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

网站地图组件

一个复杂的站点地图组件，使用大地色调配色方案实现拟物化设计样式，支持深色主题。使用 Tailwind CSS 为具有交互式元素的博客/内容目的而设计。

                <div class="bg-green-800 dark:bg-gray-900 p-8 rounded-lg shadow-lg space-y-6">
    <h1 class="text-4xl font-bold text-white dark:text-gray-200">Site Map</h1>
    <div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
        <h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Blog Sections</h2>
        <ul class="space-y-2 mt-4">
            <li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
                <a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Home
                    <span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">New</span>
                </a>
            </li>
            <li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
                <a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">About Us
                    <span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">Updated</span>
                </a>
            </li>
            <li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
                <a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Contact
                    <span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">New</span>
                </a>
            </li>
            <li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
                <a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Blog Posts
                    <span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">10</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
        <h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Featured Posts</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div class="bg-green-600 dark:bg-gray-700 rounded-md shadow p-4">
                <img src="https://picsum.photos/200/100?random=1" alt="Featured Post" class="rounded-md mb-2" />
                <h3 class="text-lg font-semibold text-white dark:text-gray-200">Post Title 1</h3>
                <p class="text-sm text-gray-300 dark:text-gray-400">Brief description of the featured post...</p>
            </div>
            <div class="bg-green-600 dark:bg-gray-700 rounded-md shadow p-4">
                <img src="https://picsum.photos/200/100?random=2" alt="Featured Post" class="rounded-md mb-2" />
                <h3 class="text-lg font-semibold text-white dark:text-gray-200">Post Title 2</h3>
                <p class="text-sm text-gray-300 dark:text-gray-400">Brief description of the featured post...</p>
            </div>
        </div>
    </div>
    <div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
        <h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Team</h2>
        <div class="flex space-x-4 mt-4">
            <div class="flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member" class="rounded-full w-16 h-16 mb-2" />
                <span class="text-white dark:text-gray-200">John Doe</span>
                <span class="text-sm text-gray-300 dark:text-gray-400">Role</span>
            </div>
            <div class="flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member" class="rounded-full w-16 h-16 mb-2" />
                <span class="text-white dark:text-gray-200">Jane Doe</span>
                <span class="text-sm text-gray-300 dark:text-gray-400">Role</span>
            </div>
        </div>
    </div>
</div>

筛选器组件

一个简单的过滤器组件，专为博客或内容消费网站设计，遵循具有单色配色方案的深色模式 UI。它具有元素最少的响应式布局。

打开预览

                <div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-md shadow-lg max-w-md mx-auto">
    <h2 class="text-white text-lg font-semibold mb-4">Filters</h2>
    <div class="mb-4">
        <label for="category" class="text-gray-300 dark:text-gray-400">Category</label>
        <select id="category" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
            <option>All</option>
            <option>Technology</option>
            <option>Health</option>
            <option>Lifestyle</option>
            <option>Travel</option>
        </select>
    </div>
    <div class="mb-4">
        <label for="author" class="text-gray-300 dark:text-gray-400">Author</label>
        <select id="author" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
            <option>All</option>
            <option>John Doe</option>
            <option>Jane Smith</option>
            <option>Chris Johnson</option>
        </select>
    </div>
    <div class="mb-4">
        <label class="text-gray-300 dark:text-gray-400">Sort By</label>
        <div class="flex space-x-4 mt-1">
            <label class="inline-flex items-center">
                <input type="radio" class="form-radio text-blue-500" name="sort" value="latest">
                <span class="ml-2 text-white">Latest</span>
            </label>
            <label class="inline-flex items-center">
                <input type="radio" class="form-radio text-blue-500" name="sort" value="popular">
                <span class="ml-2 text-white">Popular</span>
            </label>
        </div>
    </div>
    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md">Apply Filters</button>
</div>

汉堡菜单组件

适用于商业/公司网站的极简/扁平化设计响应式汉堡菜单组件，使用柔和的配色方案并支持深色模式。

打开预览

                <nav class="bg-white dark:bg-gray-800 p-4 rounded shadow">
    <div class="flex justify-between items-center">
        <div class="text-2xl font-bold text-gray-800 dark:text-white">
            Logo
        </div>
        <button id="menu-toggle" class="text-gray-800 dark:text-white focus:outline-none">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
            </svg>
        </button>
    </div>
    <div id="menu" class="hidden mt-4">
        <ul class="flex flex-col space-y-2">
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
        </ul>
    </div>
</nav>
<style>
    @media (min-width: 768px) {
        #menu {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-top: 0;
        }
        #menu-toggle {
            display: none;
        }
    }
</style>

活动 feed 组件

用于博客/内容的响应式活动源组件，具有简单的 3D 设计、柔和的配色方案、深色主题支持和 Tailwind CSS。

打开预览

                <section class="bg-gray-100 dark:bg-gray-900 py-8 lg:py-16 antialiased">
  <div class="max-w-2xl mx-auto px-4">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Activity Feed</h2>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg mb-6 relative">
      <div class="absolute inset-0 border-2 border-indigo-300 dark:border-indigo-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">John Doe posted a new article</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">Read more</a>
    </article>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg mb-6 relative">
        <div class="absolute inset-0 border-2 border-pink-300 dark:border-pink-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">Jane Smith commented on a post</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">View comment</a>
    </article>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg relative">
        <div class="absolute inset-0 border-2 border-teal-300 dark:border-teal-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">Peter Jones liked an article</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">View article</a>
    </article>

  </div>
</section>

野蛮主义数据表

一个简单的野兽派数据表组件，具有类似的颜色，适用于商业/公司网站。它是响应式的，并支持使用 Tailwind CSS 的深色模式。

打开预览

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
  <table class="min-w-full border-collapse border-spacing-0 shadow-xl">
    <thead>
      <tr class="bg-teal-500 dark:bg-teal-700 text-white">
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Name</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Title</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Status</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Role</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">John Doe</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Software Engineer</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
      </tr>
      <tr class="bg-teal-300 dark:bg-teal-500 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">Jane Smith</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">UI/UX Designer</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
      </tr>
      <tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">Peter Jones</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Product Manager</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Inactive</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Admin</td>
      </tr>
    </tbody>
  </table>
</div>

结账表单组件

响应式结帐表单，具有极简的设计、丰富的界面和三重配色方案，支持深色主题。

打开预览

                <div class="max-w-md mx-auto mt-10 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Checkout</h2>
    <form class="mt-4">
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="address">Address</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="address" placeholder="123 Main St" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="city">City</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="city" placeholder="Your City" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="state">State</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="state" placeholder="Your State" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="zip">ZIP Code</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="zip" placeholder="12345" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="card">Credit Card Number</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="card" placeholder="1234 5678 9012 3456" required>
        </div>
        <div class="mb-4 flex justify-between">
            <div class="w-1/2 mr-2">
                <label class="block text-gray-700 dark:text-gray-300" for="expiry">Expiry Date</label>
                <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="expiry" placeholder="MM/YY" required>
            </div>
            <div class="w-1/2 ml-2">
                <label class="block text-gray-700 dark:text-gray-300" for="cvc">CVC</label>
                <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="cvc" placeholder="123" required>
            </div>
        </div>
        <div class="mb-4">
            <label class="flex items-center">
                <input class="mr-2 leading-tight" type="checkbox" id="terms" required>
                <span class="text-gray-700 dark:text-gray-300">I agree to the terms and conditions</span>
            </label>
        </div>
        <button type="submit" class="w-full mt-4 p-2 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-700 dark:hover:bg-blue-400 transition duration-300">Complete Purchase</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Summary</h3>
        <ul class="mt-2 text-gray-600 dark:text-gray-400">
            <li>Item 1 - $29.99</li>
            <li>Item 2 - $49.99</li>
            <li>Total - $79.98</li>
        </ul>
    </div>
</div>

通知组件

专为仪表板设计的 Retro/Vintage 风格的通知组件，具有多个交互式元素和深色主题支持。

打开预览

                <div class="bg-purple-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-white text-2xl font-bold mb-3">Notifications</h2>
    <div class="space-y-4">
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">John Doe</p>
                <p class="text-gray-300">You have a new message. Check it out!</p>
                <span class="text-sm text-gray-500">2 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Jane Smith</p>
                <p class="text-gray-300">Your report has been approved.</p>
                <span class="text-sm text-gray-500">15 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Chris Johnson</p>
                <p class="text-gray-300">New comment on your post.</p>
                <span class="text-sm text-gray-500">30 minutes ago</span>
            </div>
        </div>
        <div class="flex items-start bg-purple-700 dark:bg-gray-800 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-white font-semibold">Anna Taylor</p>
                <p class="text-gray-300">Don't forget to review your tasks.</p>
                <span class="text-sm text-gray-500">1 hour ago</span>
            </div>
        </div>
    </div>
    <a href="#" class="block text-center text-white bg-blue-600 hover:bg-blue-700 rounded-lg mt-5 p-2 transition duration-300">View All Notifications</a>
</div>

社区论坛组件

一个响应式社区论坛组件，采用 Glassmorphism 风格设计，采用大地色调，适用于社交媒体平台。它具有磨砂玻璃效果，并与深色模式兼容。

打开预览

                <div class="min-h-screen bg-gray-800 flex flex-col items-center justify-center p-10">
    <div class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-3xl w-full">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Community Forum</h1>
        <div class="space-y-4">
            <!-- Post Example -->
            <div class="bg-white bg-opacity-20 rounded-lg p-4 shadow-md">
                <div class="flex items-center">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h2 class="font-semibold text-gray-900 dark:text-white">John Doe</h2>
                        <span class="text-sm text-gray-600 dark:text-gray-300">2 hours ago</span>
                    </div>
                </div>
                <p class="mt-2 text-gray-800 dark:text-gray-200">What do you all think about the latest trends in technology?</p>
            </div>
            <!-- Post Example -->
            <div class="bg-white bg-opacity-20 rounded-lg p-4 shadow-md">
                <div class="flex items-center">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h2 class="font-semibold text-gray-900 dark:text-white">Jane Smith</h2>
                        <span class="text-sm text-gray-600 dark:text-gray-300">1 hour ago</span>
                    </div>
                </div>
                <p class="mt-2 text-gray-800 dark:text-gray-200">I believe we are on the cusp of major changes in this field!</p>
            </div>
        </div>
        <div class="mt-6">
            <textarea class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white bg-opacity-20 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" rows="3" placeholder="Share your thoughts..."></textarea>
            <button class="mt-2 w-full py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Post</button>
        </div>
    </div>
</div>

电子商务产品画廊

一个复杂、响应式且与深色主题兼容的画廊组件，具有极简主义设计、互补配色方案和多个适用于电子商务的交互式元素。

打开预览

                <div class="dark:bg-gray-900 dark:text-white min-h-screen">
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-center mb-8">Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 1</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$19.99</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>In Stock</span>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 2</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$29.50</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>In Stock</span>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 3</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$45.00</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>Out of Stock</span>
          </div>
        </div>
      </div>
      
      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2">Product Title 4</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Short product description goes here.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-900 dark:text-white">$15.75</span>
            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">Add to Cart</button>
          </div>
          <div class="mt-4 flex justify-between text-sm text-gray-600 dark:text-gray-400">
            <span>Category</span>
            <span>In Stock</span>
          </div>
        </div>
      </div>

      <!-- Add more product cards as needed -->

    </div>

    <!-- Pagination/Load More (Example) -->
    <div class="flex justify-center mt-8">
      <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white px-6 py-3 rounded-md hover:bg-gray-400 dark:hover:bg-gray-600">Load More</button>
    </div>

  </div>
</div>

拟物化通知组件

一个受拟物化启发的简单响应式通知组件，具有适用于商业/公司网站的类似配色方案。它包括深色主题支持，并使用 Tailwind CSS 进行样式设置。图片来自 picsum.photos 和 randomuser.me 的头像。

打开预览

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full ring-2 ring-blue-300" src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar">
    <div>
      <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Notification</div>
      <p class="text-sm text-gray-600 dark:text-gray-400">You have a new message from John Doe.</p>
    </div>
  </div>
  <div class="mt-4 flex justify-end">
    <button class="px-4 py-2 bg-blue-500 text-white rounded-full shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
      View
    </button>
  </div>
</div>

1 ... 194 195 196 197 198 ... 335