搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

Back to Top 按钮

用于电子商务的返回顶部按钮，具有充满活力的深色模式设计。

                <div class="fixed bottom-4 right-4 z-50">
  <a href="#" class="bg-purple-600 dark:bg-purple-800 text-white dark:text-purple-200 p-4 rounded-full shadow-lg transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-500 focus:ring-opacity-50">
    <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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </a>
</div>

社交组件组件

一个野兽派、复杂且以电子商务为中心的社交组件，具有类似的配色方案，使用 Tailwind CSS 实现。它响应迅速并支持深色模式。

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <!-- Social Components Component -->
  <div class="max-w-4xl w-full bg-red-400 dark:bg-red-800 border-4 border-black dark:border-white shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] p-8 space-y-8">
    
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row justify-between items-center border-b-4 border-black dark:border-white pb-4">
      <h1 class="text-5xl font-extrabold text-black dark:text-white uppercase tracking-tighter mb-4 sm:mb-0">Social Feed</h1>
      <div class="flex space-x-4">
        <button class="bg-yellow-400 dark:bg-yellow-600 text-black dark:text-white px-6 py-3 border-4 border-black dark:border-white text-xl font-bold uppercase shadow-[4px_4px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_rgba(255,255,255,1)] hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">New Post</button>
        <button class="bg-blue-400 dark:bg-blue-600 text-black dark:text-white px-6 py-3 border-4 border-black dark:border-white text-xl font-bold uppercase shadow-[4px_4px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_rgba(255,255,255,1)] hover:bg-blue-500 dark:hover:bg-blue-700 transition duration-300">Profile</button>
      </div>
    </div>

    <!-- Main Content Area - Grid Layout for Posts -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Social Post Card 1 -->
      <div class="bg-green-400 dark:bg-green-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">Jane Doe</h2>
            <p class="text-black dark:text-white text-sm">2 hours ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/237/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Absolutely loving this new collection! The colors are so vibrant and the quality is superb. Perfect for my e-commerce store."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 124 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 36 Comments</button>
          </div>
          <button class="bg-purple-400 dark:bg-purple-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-purple-500 dark:hover:bg-purple-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 2 -->
      <div class="bg-yellow-400 dark:bg-yellow-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">John Smith</h2>
            <p class="text-black dark:text-white text-sm">5 hours ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1018/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Just received my order and I'm blown away! The design is so unique and the product feels incredibly durable. Highly recommend for any e-commerce business."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 289 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 78 Comments</button>
          </div>
          <button class="bg-blue-400 dark:bg-blue-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-blue-500 dark:hover:bg-blue-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 3 -->
      <div class="bg-blue-400 dark:bg-blue-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/21.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">Emily White</h2>
            <p class="text-black dark:text-white text-sm">1 day ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1025/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Selling like hotcakes! My customers can't get enough of these amazing products. The brutalist design elements really make my e-commerce site stand out."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 512 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 112 Comments</button>
          </div>
          <button class="bg-green-400 dark:bg-green-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-green-500 dark:hover:bg-green-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 4 -->
      <div class="bg-purple-400 dark:bg-purple-700 border-4 border-black dark:border-white p-6 shadow-[6px_6_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">David Lee</h2>
            <p class="text-black dark:text-white text-sm">3 days ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1040/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Fantastic addition to my product lineup. The aesthetic is so unique and powerful, perfect for attracting attention on my e-commerce platform."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 345 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 98 Comments</button>
          </div>
          <button class="bg-red-400 dark:bg-red-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-red-500 dark:hover:bg-red-700 transition duration-300">Share</button>
        </div>
      </div>

    </div>

    <!-- Call to Action / Footer Section -->
    <div class="flex flex-col sm:flex-row justify-between items-center border-t-4 border-black dark:border-white pt-8">
      <p class="text-2xl text-black dark:text-white font-bold mb-4 sm:mb-0">Explore more products on our store!</p>
      <button class="bg-yellow-400 dark:bg-yellow-600 text-black dark:text-white px-8 py-4 border-4 border-black dark:border-white text-2xl font-bold uppercase shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)] hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">Shop Now</button>
    </div>

  </div>
</div>

徽章组件

用于电子商务的响应式深色模式徽章组件，通过互补的配色方案和交互式元素展示各种徽章。

打开预览

                <div class="bg-gray-900 min-h-screen p-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-white mb-8">Product Badges</h2>

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

      <!-- Badge 1: New Arrival (Complementary - Orange/Blue) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">NEW ARRIVAL</span>
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Stylish Headphones</h3>
        <p class="text-gray-400 text-sm mb-4">Experience immersive audio with these brand new headphones.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-full">Audio</span>
          <span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-full">Electronics</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$199.99</span>
          <button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md transition duration-300">Add to Cart</button>
        </div>
      </div>

      <!-- Badge 2: Best Seller (Complementary - Green/Red) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">BEST SELLER</span>
        <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Ergonomic Office Chair</h3>
        <p class="text-gray-400 text-sm mb-4">Work in comfort with our most popular ergonomic chair.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-green-600 text-white text-xs px-3 py-1 rounded-full">Office</span>
          <span class="bg-green-600 text-white text-xs px-3 py-1 rounded-full">Furniture</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$349.00</span>
          <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md transition duration-300">View Details</button>
        </div>
      </div>

      <!-- Badge 3: Limited Stock (Complementary - Purple/Yellow) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-yellow-500 text-gray-900 text-xs font-bold px-3 py-1 rounded-full rotate-12">LIMITED STOCK</span>
        <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Vintage Camera Lens</h3>
        <p class="text-gray-400 text-sm mb-4">Capture stunning photos with this rare vintage lens.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-purple-600 text-white text-xs px-3 py-1 rounded-full">Photography</span>
          <span class="bg-purple-600 text-white text-xs px-3 py-1 rounded-full">Collector's Item</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$599.99</span>
          <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md transition duration-300">Buy Now</button>
        </div>
      </div>

      <!-- Badge 4: Special Offer (Complementary - Cyan/Magenta) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-fuchsia-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">SPECIAL OFFER</span>
        <img src="https://picsum.photos/400/300?random=4" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Smart Home Hub</h3>
        <p class="text-gray-400 text-sm mb-4">Control your entire home with this intelligent hub.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-cyan-600 text-white text-xs px-3 py-1 rounded-full">Smart Home</span>
          <span class="bg-cyan-600 text-white text-xs px-3 py-1 rounded-full">Automation</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold line-through">$129.99</span>
          <span class="text-green-400 text-xl font-bold">$99.99</span>
          <button class="bg-fuchsia-500 hover:bg-fuchsia-600 text-white px-4 py-2 rounded-md transition duration-300">Shop Offer</button>
        </div>
      </div>

      <!-- Badge 5: Customer Favorite (Complementary - Lime/Indigo) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-indigo-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">CUSTOMER FAVORITE</span>
        <img src="https://picsum.photos/400/300?random=5" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Premium Coffee Beans</h3>
        <p class="text-gray-400 text-sm mb-4">Our most loved coffee blend, perfect for your morning brew.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-lime-600 text-white text-xs px-3 py-1 rounded-full">Food & Drink</span>
          <span class="bg-lime-600 text-white text-xs px-3 py-1 rounded-full">Coffee</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$24.50</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md transition duration-300">Order Now</button>
        </div>
      </div>

      <!-- Badge 6: Eco-Friendly (Complementary - Teal/Pink) -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
        <span class="absolute top-0 right-0 -mr-4 -mt-4 bg-pink-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">ECO-FRIENDLY</span>
        <img src="https://picsum.photos/400/300?random=6" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
        <h3 class="text-xl font-semibold text-white mb-2">Reusable Shopping Bag</h3>
        <p class="text-gray-400 text-sm mb-4">Reduce your carbon footprint with this stylish reusable bag.</p>
        <div class="flex flex-wrap gap-2">
          <span class="bg-teal-600 text-white text-xs px-3 py-1 rounded-full">Sustainable</span>
          <span class="bg-teal-600 text-white text-xs px-3 py-1 rounded-full">Home Goods</span>
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-white text-lg font-bold">$12.00</span>
          <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-md transition duration-300">Learn More</button>
        </div>
      </div>

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

Neumorphic 下拉菜单（灰度）

具有灰度颜色的 Neumorphic 下拉菜单。用于投资组合的简单布局，响应式，支持深色模式。无 JavaScript。

打开预览

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

  <!-- Dropdown container -->
  <div class="relative inline-block text-left">

    <!-- Dropdown toggle button -->
    <button type="button" class="inline-flex justify-center w-full rounded-md dark:bg-gray-800 dark:text-gray-300 dark:shadow-2xl dark:hover:bg-gray-700 bg-gray-300 px-4 py-2 text-sm font-medium text-gray-700 shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-gray-500" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" 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>

    <!-- Dropdown menu (hidden by default) -->
    <div class="absolute right-0 mt-2 w-56 origin-top-right rounded-md dark:bg-gray-800 dark:shadow-2xl bg-gray-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <div class="py-1" role="none">
        <!-- Menu Item -->
        <a href="#" class="block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-0">My Work</a>
        <a href="#" class="block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-1">About Me</a>
        <a href="#" class="block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-2">Contact</a>
      </div>
    </div>
  </div>
</div>

导航组件组件

一个响应式导航组件，具有鲜艳的色彩和微交互，专为投资组合而设计。

打开预览

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-800 dark:to-red-800 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-white text-2xl font-bold transform hover:scale-105 transition-transform duration-300">My Portfolio</a>
    <ul class="flex space-x-6">
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Home
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Work
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        About
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
    </ul>
  </div>
</nav>

工具提示组件

响应式深色主题工具提示组件，是 Triadic 配色方案的一部分，适用于投资组合。使用 Tailwind CSS 构建，实现简单、简约的美感。

打开预览

                <div class="relative flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
  <div class="group relative flex">
    <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">Hover Me</button>
    <div class="opacity-0 w-48 bg-gray-700 dark:bg-gray-900 text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full -translate-x-1/2 left-1/2 ml-0 mb-3 pointer-events-none transition-opacity duration-300">
      <p>This is a triadic color scheme tooltip for your portfolio.</p>
      <svg class="absolute text-gray-700 dark:text-gray-900 h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
    </div>
  </div>
</div>

模态组件

用于电子商务的复杂、响应式和交互式模态组件，具有互补的配色方案和微交互，用于用户参与。支持深色主题。

打开预览

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
  <div class="relative p-8 border w-full max-w-md md:max-w-xl lg:max-w-3xl shadow-lg rounded-2xl bg-white dark:bg-gray-800 transform transition-all duration-500 scale-105 hover:scale-100">

    <!-- Close Button -->
    <div class="absolute top-4 right-4">
      <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition ease-in-out duration-300 transform hover:rotate-90 focus:outline-none">
        <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="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Product Image and Details -->
    <div class="md:flex items-center">
      <div class="w-full md:w-1/2 rounded-lg overflow-hidden transform transition-all duration-500 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full h-auto object-cover">
      </div>
      <div class="w-full md:w-1/2 md:ml-6 mt-4 md:mt-0 text-center md:text-left">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">Deluxe Smartwatch Pro</h2>
        <p class="text-sm text-indigo-600 dark:text-indigo-400 font-semibold mb-4">Electronics</p>
        <p class="text-gray-700 dark:text-gray-300 text-lg mb-4">Experience the future on your wrist with our Deluxe Smartwatch Pro. Track your fitness, receive notifications, and stay connected.</p>

        <div class="flex items-center justify-center md:justify-start mb-4">
          <span class="text-4xl font-bold text-teal-600 dark:text-teal-400 mr-3">$299</span>
          <span class="text-lg text-gray-500 dark:text-gray-400 line-through">$399</span>
          <span class="ml-3 px-3 py-1 bg-red-500 text-white text-xs font-semibold rounded-full transform hover:scale-110 transition duration-300">-25%</span>
        </div>
        
        <!-- Quantity Selector -->
        <div class="mb-5 flex items-center justify-center md:justify-start">
          <label for="quantity" class="text-gray-700 dark:text-gray-300 mr-3">Quantity:</label>
          <select id="quantity" name="quantity" class="form-select block w-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out hover:border-indigo-400">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>

        <!-- Call to Action Buttons -->
        <div class="flex flex-col sm:flex-row justify-center md:justify-start space-y-3 sm:space-y-0 sm:space-x-4">
          <button class="flex-1 px-6 py-3 rounded-xl bg-indigo-600 text-white font-semibold text-lg hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
            Add to Cart
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2" viewBox="0 0 20 20" fill="currentColor">
              <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.5 13 5.707 13H17a1 1 0 000-2H5.707l.293-.293A.997.997 0 006 10.5V10h1a1 1 0 000-2H7V7a1 1 0 000-2h1a1 1 0 000-2H6.555L5.216 1.76C5.074 1.25 4.5 1 4 1H3zM4 16a1 1 0 100-2 1 1 0 000 2zm10 0a1 1 0 100-2 1 1 0 000 2z" />
            </svg>
          </button>
          <button class="flex-1 px-6 py-3 rounded-xl bg-teal-500 text-white font-semibold text-lg hover:bg-teal-600 dark:bg-teal-400 dark:hover:bg-teal-500 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-75">
            Buy Now
          </button>
        </div>

      </div>
    </div>

    <!-- Customer Reviews Section -->
    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center md:text-left">Customer Reviews</h3>
      
      <div class="space-y-6">
        <!-- Review 1 -->
        <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm transform transition duration-300 hover:scale-[1.02]">
          <img class="h-12 w-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar">
          <div>
            <div class="flex items-center mb-1">
              <p class="font-semibold text-gray-900 dark:text-white mr-2">Jane Doe</p>
              <div class="flex text-yellow-400">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400">"Absolutely love this smartwatch! The features are incredible, and it looks super stylish."</p>
          </div>
        </div>

        <!-- Review 2 -->
        <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm transform transition duration-300 hover:scale-[1.02]">
          <img class="h-12 w-12 rounded-full object-cover mr-4 ring-2 ring-teal-500" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar">
          <div>
            <div class="flex items-center mb-1">
              <p class="font-semibold text-gray-900 dark:text-white mr-2">John Smith</p>
              <div class="flex text-yellow-400">
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-400">"Great value for money. The battery life is impressive, and I love the vibrant display."</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

布局组件组件

响应式仪表板布局组件，具有 Glassmorphism 样式、鲜艳的配色方案和使用 Tailwind CSS 的深色主题支持。它具有一个侧边栏和一个主要内容区域，其中包含磨砂玻璃般的半透明元素和模糊效果。

打开预览

                <div class="min-h-screen bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-900 dark:to-black text-gray-200 dark:text-gray-300">
    <div class="flex flex-col md:flex-row">
        <!-- Sidebar -->
        <aside class="w-full md:w-64 p-6 space-y-6 bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg m-4 shadow-lg md:h-screen md:sticky md:top-4">
            <div class="text-2xl font-bold text-white dark:text-purple-300">Dashboard</div>
            <nav class="space-y-4">
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l.01.01M17 10v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                    Home
                </a>
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1M12 8c-.11 0-.22-.02-.33-.03M2.985 19.845A6.5 6.5 0 019 12.5v-1.1c0 .991.737 1.838 1.83 2 2.204.306 3.659 1.815 3.659 3.093l-.004.004A6.5 6.5 0 0112 21a6.5 6.5 0 01-6.015-3.155M1.015 19.845C2.107 18.067 4 16.5 6.5 16.5c1.442-.016 2.875-.521 3.864-1.413M7.5 14a.5.5 0 100-1 .5.5 0 000 1z"></path></svg>
                    Analytics
                </a>
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 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="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"></path></svg>
                    Reports
                </a>
                <a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
                    <svg class="h-6 w-6 mr-3 text-purple-300 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                    Settings
                </a>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 p-6 md:p-10">
            <header class="flex items-center justify-between mb-8">
                <h1 class="text-4xl font-extrabold text-white dark:text-purple-300">Overview</h1>
                <div class="flex items-center space-x-4">
                    <span class="text-white dark:text-purple-300">Welcome, User!</span>
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600">
                </div>
            </header>

            <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Card 1 -->
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Total Sales</h2>
                    <p class="text-3xl font-extrabold text-purple-400 dark:text-purple-500">$12,345</p>
                    <p class="text-green-300 mt-2 flex items-center"><svg class="h-5 w-5 mr-1" 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="M7 11h10m-5-5v12"></path></svg> +15% from last month</p>
                </div>

                <!-- Card 2 -->
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">New Users</h2>
                    <p class="text-3xl font-extrabold text-teal-300 dark:text-teal-400">876</p>
                    <p class="text-red-300 mt-2 flex items-center"><svg class="h-5 w-5 mr-1" 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="M13 17h6m-3-3v6m5-10a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1h16a1 1 0 011 1v4z"></path></svg>-5% from last month</p>
                </div>

                <!-- Card 3 -->
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Orders Pending</h2>
                    <p class="text-3xl font-extrabold text-yellow-300 dark:text-yellow-400">42</p>
                    <p class="text-green-300 mt-2 flex items-center"><svg class="h-5 w-5 mr-1" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg> +8% from last week</p>
                </div>
            </section>

            <section class="mt-8">
                <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
                    <h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Recent Activity</h2>
                    <ul class="space-y-4">
                        <li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
                            <p><span class="font-semibold text-purple-200 dark:text-purple-300">Jane Doe</span> purchased <span class="font-semibold text-blue-200 dark:text-blue-300">Premium Subscription</span>.</p>
                            <span class="ml-auto text-sm text-gray-300 dark:text-gray-400">2 hours ago</span>
                        </li>
                        <li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
                            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
                            <p><span class="font-semibold text-purple-200 dark:text-purple-300">John Smith</span> commented on <span class="font-semibold text-pink-200 dark:text-pink-300">Marketing Report Q3</span>.</p>
                            <span class="ml-auto text-sm text-gray-300 dark:text-gray-400">1 day ago</span>
                        </li>
                        <li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
                            <img src="https://randomuser.me/api/portraits/women/60.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
                            <p><span class="font-semibold text-purple-200 dark:text-purple-300">Emily White</span> uploaded <span class="font-semibold text-green-200 dark:text-green-300">New Product Images</span>.</p>
                            <span class="ml-auto text-sm text-gray-300 dark:text-gray-400">3 days ago</span>
                        </li>
                    </ul>
                </div>
            </section>
        </main>
    </div>
</div>

折叠组件

Glassmorphism 手风琴组件，为社交媒体提供鲜艳的色彩，具有具有模糊效果的磨砂玻璃状半透明元素、具有多个交互元素的丰富界面、响应式设计和深色主题支持。不需要 JavaScript 代码，只需要带有 Tailwind 类的 HTML。

打开预览

                <div class="relative min-h-screen bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-8 flex items-center justify-center">
    <div class="absolute inset-0 z-0 bg-[url('https://picsum.photos/1920/1080?random=1')] bg-cover bg-center opacity-20"></div>
    <div class="absolute inset-0 z-0 backdrop-filter backdrop-blur-3xl"></div>
    <div class="relative z-10 w-full max-w-2xl bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 rounded-3xl shadow-xl overflow-hidden border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30">
        <div class="p-8">
            <h2 class="text-4xl font-extrabold text-white dark:text-white mb-8 text-center drop-shadow-lg">Social Feed Accordion</h2>
            
            <!-- Accordion Item 1 -->
            <div class="mb-6 bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
                <input type="checkbox" id="accordion-1" class="hidden peer">
                <label for="accordion-1" class="flex justify-between items-center p-6 cursor-pointer">
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
                        <h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Sarah J., posted a new photo</h3>
                    </div>
                    <svg class="w-6 h-6 text-white dark:text-white transform transition-transform duration-300 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
                </label>
                <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
                    <div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
                        <p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Absolutely loving this view! So refreshing to be out in nature. #TravelGoals #NatureLover"</p>
                        <img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="rounded-xl mb-4 w-full h-auto object-cover border border-white border-opacity-30 dark:border-gray-500">
                        <div class="flex items-center justify-between text-white text-opacity-90 dark:text-gray-300 text-sm">
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg> 24 Likes</span>
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z" clip-rule="evenodd"></path></svg> 8 Comments</span>
                        </div>
                        <div class="mt-4 flex flex-col space-y-3">
                            <div class="flex items-start">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Commenter 1" class="w-8 h-8 rounded-full mr-3 border-2 border-white dark:border-gray-400">
                                <p class="text-white text-opacity-80 dark:text-gray-300"><span class="font-semibold">John D.</span>: "Stunning! Where is this place?"</p>
                            </div>
                            <div class="flex items-start">
                                <img src="https://randomuser.me/api/portraits/women/21.jpg" alt="Commenter 2" class="w-8 h-8 rounded-full mr-3 border-2 border-white dark:border-gray-400">
                                <p class="text-white text-opacity-80 dark:text-gray-300"><span class="font-semibold">Emily R.</span>: "Love your adventurous spirit!"</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Accordion Item 2 -->
            <div class="mb-6 bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
                <input type="checkbox" id="accordion-2" class="hidden peer">
                <label for="accordion-2" class="flex justify-between items-center p-6 cursor-pointer">
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
                        <h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Mike T., shared an article</h3>
                    </div>
                    <svg class="w-6 h-6 text-white dark:text-white transform transition-transform duration-300 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
                </label>
                <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
                    <div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
                        <p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Fascinating read on the future of AI. Definitely recommend checking this out. #AI #Technology"</p>
                        <div class="bg-white bg-opacity-20 dark:bg-gray-600 dark:bg-opacity-40 rounded-xl p-4 flex items-center mb-4 border border-white border-opacity-30 dark:border-gray-500">
                            <img src="https://picsum.photos/100/100?random=3" alt="Article Thumbnail" class="w-24 h-24 object-cover rounded-lg mr-4">
                            <div>
                                <h4 class="text-lg font-bold text-white dark:text-white mb-1">The Rise of Intelligent Machines</h4>
                                <p class="text-white text-opacity-80 dark:text-gray-300 text-sm">An in-depth look at the impact of AI on society and beyond.</p>
                                <a href="#" class="text-blue-200 hover:underline dark:text-blue-300 text-sm">Read More</a>
                            </div>
                        </div>
                        <div class="flex items-center justify-between text-white text-opacity-90 dark:text-gray-300 text-sm">
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg> 45 Likes</span>
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z" clip-rule="evenodd"></path></svg> 15 Comments</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Accordion Item 3 -->
            <div class="bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-25 backdrop-filter backdrop-blur-xl rounded-2xl overflow-hidden shadow-lg border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-30 group">
                <input type="checkbox" id="accordion-3" class="hidden peer">
                <label for="accordion-3" class="flex justify-between items-center p-6 cursor-pointer">
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-white dark:border-gray-300">
                        <h3 class="text-xl font-semibold text-white dark:text-white drop-shadow-md">Jessica L., updated her profile</h3>
                    </div>
                    <svg class="w-6 h-6 text-white dark:text-white transform transition-transform duration-300 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
                </label>
                <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out px-6 pb-6">
                    <div class="border-t border-white border-opacity-30 dark:border-gray-500 dark:border-opacity-40 pt-4">
                        <p class="text-white text-opacity-90 dark:text-gray-200 mb-4">"Excited to start a new chapter! Check out my updated bio and recent work. #NewBeginnings #CareerGoals"</p>
                        <div class="flex items-center text-white text-opacity-90 dark:text-gray-300 text-sm">
                            <span class="flex items-center"><svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg> Profile Updated</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

登录表单组件

用于社交媒体的拟物化登录表单，具有柔和的色彩、响应式和深色模式支持。该表单在输入和按钮上具有微妙的 3D 效果，模仿物理元素。阴影和渐变用于增强拟物化的感觉。输入具有柔和的插入阴影，按钮具有凸起的可单击外观。柔和的配色方案在深色模式下平滑过渡到较暗、柔和的版本，保持可读性和视觉舒适度。响应式设计确保跨设备的可用性。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-2xl w-full max-w-md
              transform transition-all duration-300 ease-in-out
              hover:shadow-3xl hover:-translate-y-1
              ring-4 ring-indigo-300/50 dark:ring-gray-600/50
              relative overflow-hidden">

    <!-- Skeuomorphic "Glass" Effect Overlay -->
    <div class="absolute inset-0 bg-white/20 dark:bg-gray-800/20 backdrop-blur-sm rounded-xl
                transform -rotate-3 translate-x-2 translate-y-2 opacity-0 group-hover:opacity-100 transition duration-500 ease-in-out"></div>

    <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white text-center mb-8
               drop-shadow-lg [text-shadow:0px_2px_4px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
      Welcome Back!
    </h2>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
                                  [text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
          Email
        </label>
        <div class="relative">
          <input type="email" id="email" name="email" autocomplete="email"
                 class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
                        bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
                        focus:ring-2 focus:ring-indigo-400 focus:border-transparent
                        transition duration-200 ease-in-out
                        [box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
                        dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
                 placeholder="[email protected]">
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
            <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
              <path d="M2.003 5.884L10 10.49l7.997-4.606A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
              <path d="M18 8.118l-8 4.615-8-4.615V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
            </svg>
          </div>
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
                                     [text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
          Password
        </label>
        <div class="relative">
          <input type="password" id="password" name="password" autocomplete="current-password"
                 class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
                        bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
                        focus:ring-2 focus:ring-indigo-400 focus:border-transparent
                        transition duration-200 ease-in-out
                        [box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
                        dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
                 placeholder="••••••••">
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
            <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H7V7a3 3 0 016 0v2h-2V7a1 1 0 00-1-1zm-4 8h8v7H6v-7z"></path>
            </svg>
          </div>
        </div>
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
                 class="h-4 w-4 text-indigo-600 dark:text-indigo-400 rounded
                        focus:ring-indigo-500 dark:focus:ring-indigo-300
                        ring-offset-white dark:ring-offset-gray-700
                        border-gray-300 dark:border-gray-600
                        cursor-pointer
                        [box-shadow:0px_1px_2px_rgba(0,0,0,0.1)] dark:[box-shadow:0px_1px_2px_rgba(0,0,0,0.4)]">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200
                                          [text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
                           [text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
            Forgot your password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg
                       text-lg font-semibold text-white
                       bg-gradient-to-r from-indigo-500 to-purple-500
                       hover:from-indigo-600 hover:to-purple-600
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-gray-300
                       transition duration-200 ease-in-out
                       transform active:scale-98 active:shadow-md
                       [box-shadow:0px_4px_8px_rgba(0,0,0,0.2),inset_0px_1px_0px_rgba(255,255,255,0.4)]
                       dark:[box-shadow:0px_4px_8px_rgba(0,0,0,0.6),inset_0px_1px_0px_rgba(255,255,255,0.1)]">
          Sign In
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">
        Don't have an account?
        <a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
                           [text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
          Sign Up
        </a>
      </p>
    </div>
  </div>
</div>

1 ... 135 136 137 138 139 ... 335