搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

愿望清单组件

具有 3D 设计、相似配色方案和用于仪表板的简单复杂性的愿望清单组件，具有响应式设计和深色主题支持。

                <div class="dark:bg-gray-900 bg-gray-100 min-h-screen p-4">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden md:max-w-2xl transform transition-all duration-300 hover:scale-105">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48 transform translate-x-2 translate-y-2 rotate-3 shadow-lg rounded-lg" src="https://picsum.photos/seed/wishlist/400/300" alt="Product image">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Wishlist Item</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Awesome Product Name</a>
        <p class="mt-2 text-gray-500 dark:text-gray-400">A short description of the product, highlighting its key features and benefits.</p>
        <div class="mt-4 flex items-center justify-between">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Retro/Vintage 社交媒体导航栏

Retro/Vintage 社交媒体导航栏，具有相似的配色方案、简单的复杂性、响应式和深色主题支持。

打开预览

                <nav class="bg-gradient-to-r from-purple-700 via-pink-500 to-red-500 p-4 shadow-lg dark:from-purple-900 dark:via-pink-700 dark:to-red-700">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-2xl font-bold font-retro">SocialFlow</div>
    <div class="space-x-4">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Feed</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Friends</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Messages</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Profile</a>
    </div>
    <div class="flex items-center space-x-4">
      <button class="text-white focus:outline-none dark:text-gray-300" onclick="document.documentElement.classList.toggle('dark')">
        <svg class="w-6 h-6" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9 9 0 008.354-5.646z"></path></svg>
      </button>
    </div>
  </div>
</nav>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  .font-retro {
    font-family: 'Press Start 2P', cursive;
  }
</style>

Neumorphic Back to Top 按钮

用于电子商务的中态“返回顶部”按钮，提供微妙、柔和的 UI 设计，使用精致的阴影与背景融为一体。它具有相似的颜色，外观和谐，布局简单，响应式设计，支持深色主题，非常适合在线购物体验。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <a href="#" class="back-to-top-button relative p-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover"
    aria-label="Back to top">
    <svg class="w-6 h-6 text-indigo-600 dark:text-purple-400" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </a>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #cbced1, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
  }

  .shadow-neumorphic-light-hover {
    box-shadow: inset 6px 6px 12px #cbced1, inset -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark-hover {
    box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #2e2e2e;
  }
</style>

Glassmorphism 360 查看器组件

Glassmorphism 360° 查看器组件，用于仪表板，具有三重配色方案、简单复杂性、响应式设计和深色主题支持。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-lg p-6 bg-white bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-60 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4 text-center">Product 360° View</h2>
    <div class="relative w-full h-64 mb-4 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600">
      <img src="https://picsum.photos/seed/tool/600/400" alt="360 Product View" class="absolute inset-0 w-full h-full object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-blue-500 bg-opacity-20 dark:bg-blue-800 dark:bg-opacity-20 transform rotate-45 scale-150 opacity-0 transition-opacity duration-300 hover:opacity-100">
        <p class="text-white text-lg font-bold -rotate-45">360°</p>
      </div>
    </div>
    <div class="flex justify-around items-center">
      <button class="p-3 rounded-full bg-red-400 text-white dark:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-105">
        <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="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-green-400 text-white dark:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-105">
        <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="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </button>
    </div>
  </div>
</div>

会话超时警报组件

用于电子商务的复杂 Neumorphic 风格会话超时警报组件，具有单色配色方案和响应式设计，支持深色模式。

打开预览

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-900 font-sans">

  <!-- Neumorphic Session Timeout Card -->
  <div class="w-full max-w-md p-8 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200">

    <!-- Header -->
    <div class="flex items-center mb-6">
      <div class="w-12 h-12 rounded-full flex items-center justify-center shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mr-4">
        <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <h2 class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">Session Timeout</h2>
    </div>

    <!-- Progress Bar (Monochromatic Indigo) -->
    <div class="mb-6 h-4 rounded-full shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark bg-gray-300 dark:bg-gray-700 overflow-hidden">
      <div class="h-full bg-indigo-500 dark:bg-indigo-600 rounded-full" style="width: 75%;"></div>
    </div>

    <!-- Message -->
    <p class="text-center text-lg mb-8">
      Your session is about to expire due to inactivity.
      <span class="font-semibold text-indigo-700 dark:text-indigo-300">Please choose an option to continue.</span>
    </p>

    <!-- Timer Display -->
    <div class="flex items-center justify-center mb-8">
      <div class="text-5xl font-extrabold text-indigo-800 dark:text-indigo-200 tracking-wide">
        00:<span class="animate-pulse">45</span>
      </div>
    </div>

    <!-- Call to Action Buttons -->
    <div class="flex flex-col space-y-4">
      <button class="w-full py-4 rounded-xl shadow-neumorphic-light hover:shadow-neumorphic-hover-light dark:shadow-neumorphic-dark dark:hover:shadow-neumorphic-hover-dark bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white text-lg font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1">
        Continue Session
      </button>
      <button class="w-full py-4 rounded-xl shadow-neumorphic-light hover:shadow-neumorphic-hover-light dark:shadow-neumorphic-dark dark:hover:shadow-neumorphic-hover-dark bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 text-lg font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1">
        Log Out
      </button>
    </div>

    <!-- Footer Link -->
    <div class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Need help? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Contact Support</a>
    </div>

  </div>

</div>

<style>
  /* Base Neumorphic Shadows */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #afafaf, -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #333333;
  }

  /* Hover State Shadows */
  .shadow-neumorphic-hover-light {
    box-shadow: 4px 4px 8px #afafaf, -4px -4px 8px #ffffff;
  }
  .dark .shadow-neumorphic-hover-dark {
    box-shadow: 4px 4px 8px #1a1a1a, -4px -4px 8px #333333;
  }

  /* Inset Shadows for elements that appear "pressed in" */
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #afafaf, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
  }
</style>

点赞/反应按钮组件

一个复杂的、响应式的、单色的点赞/反应按钮组件，具有面向商业/公司网站的以微交互为中心的动画，支持深色主题。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="flex space-x-2 p-4 rounded-lg bg-white dark:bg-gray-800 shadow-lg">
    <!-- Like Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 hover:text-white transform transition duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 group">
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 group-hover:text-white" 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="M14 10h4.764a2 2 0 011.857 2.118l-2.625 10A2 2 0 0117.279 22H3.721c-1.146 0-2.07-.988-1.921-2.118l2.625-10A2 2 0 016.721 10h4.764M14 10V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5m7 2v8a2 2 0 002 2h2a2 2 0 002-2v-8m-7 0H3"></path></svg>
      <span class="font-semibold">Like</span>
    </button>

    <!-- Reaction Buttons with Popover Effect -->
    <div class="relative group">
      <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 hover:text-white transform transition duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 group-hover:text-white" 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span class="font-semibold">React</span>
      </button>

      <!-- Reactions Popover -->
      <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 rounded-full bg-white dark:bg-gray-800 shadow-xl opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300 transform scale-95 group-hover:scale-100 group-focus-within:scale-100 origin-bottom flex space-x-2">
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Love">
          <span class="text-2xl">❤️</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Haha">
          <span class="text-2xl">😂</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Wow">
          <span class="text-2xl">😮</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Sad">
          <span class="text-2xl">😢</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Angry">
          <span class="text-2xl">😡</span>
        </button>
      </div>
    </div>
  </div>
</div>

添加到购物车按钮组件

一个响应式“添加到购物车”按钮组件，采用 Material Design 原则设计，具有三元配色方案并支持深色模式。它专为仪表板使用而设计，包括一个数量选择器，并使用 Tailwind CSS 为阴影和动画集成深度效果。

打开预览

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="flex flex-col md:flex-row items-center bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl space-y-4 md:space-y-0 md:space-x-6 w-full max-w-2xl transform transition-all duration-300 hover:shadow-2xl">
    <div class="flex-shrink-0 w-32 h-32 md:w-48 md:h-48 rounded-lg overflow-hidden shadow-md dark:shadow-lg">
      <img src="https://picsum.photos/seed/addtocart/400/400" alt="Product Image" class="w-full h-full object-cover">
    </div>
    <div class="flex-grow text-center md:text-left">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Awesome Product Name</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">A brief description of the amazing product that will enhance your life.</p>
      <div class="flex items-center justify-center md:justify-start mb-4">
        <span class="text-3xl font-extrabold text-indigo-600 dark:text-teal-400">$29.99</span>
        <span class="text-lg text-gray-500 dark:text-gray-400 line-through ml-2">$39.99</span>
      </div>
      <div class="flex items-center justify-center md:justify-start space-x-3 mb-4">
        <label for="quantity" class="text-gray-700 dark:text-gray-300 font-medium">Quantity:</label>
        <input type="number" id="quantity" name="quantity" min="1" value="1" class="w-20 p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-teal-400">
      </div>
      <button class="w-full md:w-auto px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md transition-all duration-300 hover:bg-indigo-700 dark:bg-teal-500 dark:hover:bg-teal-600 focus:outline-none focus:ring-4 focus:ring-indigo-500 dark:focus:ring-teal-400 focus:ring-opacity-50 transform hover:-translate-y-0.5 active:scale-95">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z" />
        </svg>
        Add to Cart
      </button>
      <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
        <p>Estimated delivery: <span class="font-bold">3-5 business days</span></p>
        <p>In stock: <span class="font-bold text-green-500">Yes</span></p>
      </div>
    </div>
  </div>
</div>

Toast 通知组件

具有 Glassmorphism 样式、大地色调配色方案和响应式设计的 Toast 通知组件，支持深色模式。

打开预览

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Toast 1 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar1/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">John Doe</p>
      <p class="text-xs">New message received.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>

  <!-- Toast 2 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar2/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">Jane Smith</p>
      <p class="text-xs">Your report is ready.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>

  <!-- Toast 3 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar3/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">System Update</p>
      <p class="text-xs">Security patch applied.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>
</div>

愿望清单组件

用于电子商务的 Retro/Vintage Wishlist 组件，具有三重配色方案、简单的复杂性、响应式设计和深色主题支持。

打开预览

                <div class="font-mono bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-bold text-purple-700 dark:text-purple-300 mb-8 text-center">My Wishlist</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Wishlist Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-6">
          <h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Retro Analog Camera</h2>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Capture memories in true vintage style. Limited stock!</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-red-500 dark:text-red-400">$129.99</span>
            <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-6">
          <h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Classic Vinyl Player</h2>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Experience the warm, rich sound of vinyl records like never before.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-red-500 dark:text-red-400">$89.50</span>
            <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-6">
          <h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Vintage Desk Lamp</h2>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Illuminate your workspace with a touch of timeless elegance.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-red-500 dark:text-red-400">$39.99</span>
            <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

下拉菜单组件

一个受 Material Design 启发的下拉菜单组件，适用于投资组合，具有相似的颜色、响应能力和使用 Tailwind CSS 的深色模式支持。

打开预览

                <div class="relative w-full md:w-64">
  <button class="flex items-center justify-between w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100" id="options-menu" aria-haspopup="true" aria-expanded="true">
    <span>Options</span>
    <svg class="w-5 h-5 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>

  <div class="absolute right-0 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-gray-800 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">License</a>
      <form method="POST" action="#">
        <button type="submit" class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Sign out</button>
      </form>
    </div>
  </div>
</div>

1 ... 121 122 123 124 125 ... 335