搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

时间线组件

一个具有3D设计风格的响应式时间轴组件，采用单色调色方案，旨在展示作品或产品的作品集。它包含多个互动元素，并支持深色主题。

                <div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 py-10">
    <div class="relative w-full max-w-4xl">
        <div class="border-l-4 border-indigo-600 dark:border-indigo-300">
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 1</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=1" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 2</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=2" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 3</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=3" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

标题组件

一个响应式页头组件，采用极简主义风格，具有淡色配色方案，适用于博客或内容网站，并包含深色主题支持。

打开预览

                <header class="bg-pastel-100 dark:bg-gray-800 p-6 flex items-center justify-between">
    <div class="flex items-center space-x-3">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white">My Blog</h1>
    </div>
    <nav class="space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
    </nav>
    <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <span class="text-gray-900 dark:text-white">Username</span>
    </div>
</header>

<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer base {
        /* Define pastel colors */
        .bg-pastel-100 {
            background-color: #F9D7C1;
        }
    }
</style>

简单的仿生学电子商务媒体组件

Neumorphism风格的媒体组件，采用大地色调，简单复杂度，适用于电子商务网站，具有响应式设计和深色主题支持。使用picsum.photos作为图片源。

打开预览

                <div class="p-4 max-w-sm mx-auto bg-gray-200 rounded-xl shadow-lg space-y-4 dark:bg-gray-800">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md shadow-md" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
    <button class="absolute top-2 right-2 bg-white text-gray-800 dark:bg-gray-700 dark:text-gray-200 p-1 rounded-full shadow-md">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>
  <div class="text-center">
    <div class="text-lg font-medium text-black dark:text-white">Product Title</div>
    <p class="text-gray-500 dark:text-gray-400">$19.99</p>
  </div>
  <div class="flex justify-center">
    <button class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-semibold rounded-lg shadow-md hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
      Add to Cart
    </button>
  </div>
</div>

视频播放器

视频播放器组件，具有微交互、互补色彩方案、中等复杂性，以及用于作品集的支持深色主题的响应式设计。

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden max-w-xl mx-auto">
  <div class="relative">
    <video class="w-full" controls poster="https://picsum.photos/id/1018/1000/600/">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50">
      <button class="text-white text-4xl">
        ▶
      </button>
    </div>
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Project Title</h3>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Brief description of the project or video content.</p>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
    </div>
  </div>
</div>

复古/怀旧电子商务网格布局

一个响应式、支持深色主题的网格布局组件，具有复古/怀旧和淡色设计，旨在用于电子商务产品展示。使用Tailwind CSS，并包括模拟图片和头像。

打开预览

                ```html
<div class="bg-pastel-light dark:bg-pastel-dark p-6 md:p-12">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro1/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Retro Sunglasses</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Stylish sunglasses with a vintage feel.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$45.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro2/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Vintage Camera</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Classic camera for capturing memories.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$120.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro3/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Retro Watch</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">A timepiece with timeless style.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$80.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro4/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Vintage Radio</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Listen to your favorite tunes in style.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$60.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro5/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Retro Skateboard</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Ride in style with this vintage board.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$75.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro6/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Vintage Headphones</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Experience music with a retro vibe.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$55.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Add custom pastel and retro colors in your Tailwind config */
  /* For example: */
  /* theme: { extend: { colors: { pastel: { light: '#f3e7e9', dark: '#e8d7d4' }, retro: { dark: '#3a3a52', light: '#f5f5dc', accent: '#ff6b6b', 'accent-dark': '#c93b3b' } } } } */
</style>
```

标签云组件玻璃体单色复杂电子商务

用于电子商务的玻璃 Morphism 标签云组件

打开预览

                <div class="flex flex-wrap justify-center p-8 bg-gray-200 dark:bg-gray-900 min-h-screen items-center">
  <div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-xl max-w-2xl w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Popular Tags</h2>
    <div class="flex flex-wrap gap-3 justify-center">
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Electronics</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Apparel</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity 50 transition duration-300 ease-in-out">Home Goods</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Books</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Sports</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Beauty</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Outdoors</span>
      <span class="px-4 py-2 rounded-full bg-gray-500 bg-opacity-30 text-gray-800 dark:text-white text-sm font-semibold dark:bg-gray-600 dark:bg-opacity-30 backdrop-filter backdrop-blur-sm cursor-pointer hover:bg-opacity-50 dark:hover:bg-opacity-50 transition duration-300 ease-in-out">Gaming</span>
    </div>
  </div>
</div>

时间轴组件

一个具有3D设计元素的响应式时间轴组件，采用大地色调色彩方案和深色模式支持。适用于作品集。

打开预览

                <div class="container mx-auto py-12">
  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute top-0 left-1/2 w-0.5 h-full bg-gray-700 transform -translate-x-1/2 dark:bg-gray-300"></div>
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet messy, consectetur adipiscing elit. Sed do eiusmod tempor messy incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-left">
        <p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
     <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <p class="mb-3 text-base text-gray-900 dark:text-white">10 May 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Alpha</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-left">
        <p class="mb-3 text-base text-gray-900 dark:text-white">15 June 2023</p>
        <h4 class="mb-3 font-bold text-lg md:text-2xl text-gray-900 dark:text-white">Project Beta</h4>
        <p class="text-sm md:text-base leading-snug text-gray-800 dark:text-gray-200">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>
  </div>
</div>

新拟态社交媒体按钮

一个简单的Neumorphism风格按钮组件，用于社交媒体接口，具有响应式设计和深色模式支持，使用Tailwind CSS。该按钮采用类似色彩方案和微妙阴影，营造出柔和的挤出效果。

打开预览

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-800">
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover">
    Like
  </button>
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover">
    Share
  </button>
  <button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover-analogous dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover-analogous">
    Comment
  </button>
</div>

<style>
@media (prefers-color-scheme: light) {
  .shadow-neumorphism-light {
    box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
  }
  .hover\:shadow-neumorphism-light-hover:hover {
    box-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
  }
    .hover\:shadow-neumorphism-light-hover-analogous:hover {
    box-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffeead;
  }
}

@media (prefers-color-scheme: dark) {
  .shadow-neumorphism-dark {
    box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #363636;
  }
  .hover\:shadow-neumorphism-dark-hover:hover {
    box-shadow: 2px 2px 5px #4a4a4a, -2px -2px 5px #363636;
  }
    .hover\:shadow-neumorphism-dark-hover-analogous:hover {
    box-shadow: 2px 2px 5px #4a4a4a, -2px -2px 5px #808000;
  }
}
</style>

电子商务组件

一个响应式电子商务组件，具有微交互、类似色彩方案和深色主题支持。

打开预览

                <div class="container mx-auto p-4 dark:bg-gray-800">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Product 1 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
      <img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
        <p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product 2 (similar structure) -->
     <div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
      <img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
        <p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

导航组件

一个电子商务网站的极简导航组件，具有Logo、搜索栏、导航链接、购物车图标和用户头像，使用Tailwind CSS。该组件支持响应式设计和暗模式。

打开预览

                <nav class="bg-white dark:bg-gray-800 p-4 flex items-center justify-between">  <div class="flex items-center">    <img src="https://picsum.photos/100/50" alt="Logo" class="h-10 mr-4">    <ul class="hidden md:flex space-x-8 text-gray-700 dark:text-gray-300">      <li><a href="#" class="hover:underline">Home</a></li>      <li><a href="#" class="hover:underline">Shop</a></li>      <li><a href="#" class="hover:underline">About</a></li>      <li><a href="#" class="hover:underline">Contact</a></li>    </ul>  </div>  <div class="flex items-center">    <div class="relative">      <input type="text" placeholder="Search" class="border border-gray-300 dark:border-gray-600 rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600"><span class="absolute left-3 top-2 text-gray-400 dark:text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M16.65 10.65A5.48 5.48 0 0015 12a5.48 5.48 0 01-1.65 4.35A5.48 5.48 0 0012 17a5.48 5.48 0 00-4.35-1.65A5.48 5.48 0 007 12a5.48 5.48 0 011.65-4.35A5.48 5.48 0 0012 7c1.3 0 2.57.47 3.65 1.65z"/></svg></span>    </div>    <a href="#" class="ml-4 text-gray-700 dark:text-gray-300 relative">      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h18M3 12h18M3 21h18"/></svg>      <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full h-5 w-5 flex items-center justify-center text-xs">0</span>    </a>    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="ml-4 rounded-full h-10 w-10">  </div>  <button class="md:hidden text-gray-700 dark:text-gray-300 focus:outline-none">    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg>  </button></nav>

1 ... 240 241 242 243 244 ... 335