搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

电子商务标题组件

使用 Tailwind CSS 和 Material Design 原则构建的响应式电子商务标头组件。具有单色配色方案（蓝色阴影）、搜索功能、导航菜单、购物车和用户配置文件。该标题包括阴影等深度效果，并支持深色模式。该组件通过移动汉堡菜单完全响应。

打开预览

                <!-- E-commerce Header with Material Design and Monochromatic Color Scheme -->
<header class="bg-blue-50 dark:bg-blue-900 shadow-md transition-colors duration-300">
  <!-- Top Bar with announcements -->
  <div class="bg-blue-600 dark:bg-blue-800 text-white py-2 px-4 text-center text-sm">
    <p>Free shipping on orders over $50 | Use code WELCOME10 for 10% off your first order</p>
  </div>

  <!-- Main Header -->
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row items-center justify-between py-4">
      <!-- Logo -->
      <div class="flex items-center mb-4 md:mb-0">
        <a href="#" class="text-2xl font-bold text-blue-700 dark:text-blue-300">
          <span class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
            </svg>
            ShopMate
          </span>
        </a>
      </div>
      
      <!-- Mobile Menu Button -->
      <div class="md:hidden mb-4 w-full flex justify-end">
        <button class="mobile-menu-button p-2 rounded-md hover:bg-blue-100 dark:hover:bg-blue-700 transition duration-150 focus:outline-none">
          <svg class="h-6 w-6 text-blue-700 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
      
      <!-- Search Bar -->
      <div class="w-full md:w-1/3 order-3 md:order-2 mb-4 md:mb-0">
        <div class="relative rounded-md shadow-sm">
          <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-md border border-blue-200 dark:border-blue-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 bg-white dark:bg-blue-800 dark:text-white transition-colors duration-300" />
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-blue-400 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
      </div>
      
      <!-- Right Menu Items -->
      <div class="flex items-center space-x-5 order-2 md:order-3">
        <!-- Theme Toggle -->
        <button class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
          </svg>
        </button>
        
        <!-- Wishlist -->
        <a href="#" class="relative text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </a>
        
        <!-- Shopping Cart -->
        <a href="#" class="relative text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          <span class="absolute -top-2 -right-2 w-5 h-5 text-xs bg-blue-500 dark:bg-blue-400 text-white rounded-full flex items-center justify-center">3</span>
        </a>
        
        <!-- User Account -->
        <a href="#" class="flex items-center text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile" class="w-8 h-8 rounded-full border-2 border-blue-300 dark:border-blue-600 shadow-sm" />
        </a>
      </div>
    </div>
    
    <!-- Navigation Menu -->
    <nav class="hidden md:block border-t border-blue-100 dark:border-blue-700 py-4 transition-colors duration-300">
      <ul class="flex flex-wrap justify-center space-x-8">
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Home</a></li>
        <li class="group relative">
          <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300 flex items-center">
            Women
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </a>
        </li>
        <li class="group relative">
          <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300 flex items-center">
            Men
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </a>
        </li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Kids</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Accessories</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Sale</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">New Arrivals</a></li>
      </ul>
    </nav>
    
    <!-- Mobile Navigation Menu (Hidden by default) -->
    <nav class="mobile-menu hidden md:hidden border-t border-blue-100 dark:border-blue-700 py-4 transition-colors duration-300">
      <ul class="flex flex-col space-y-4 px-2">
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Home</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Women</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Men</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Kids</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Accessories</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Sale</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">New Arrivals</a></li>
      </ul>
    </nav>
  </div>
</header>

会话超时警报

一个用于电子商务网站的简单深色模式会话超时警报组件，使用 TailwindCSS 设计具有柔和的色彩和响应能力。

打开预览

                <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center p-4">
  <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm w-full border border-pink-300">
    <h3 class="text-lg font-bold text-pink-200 mb-4">Session expiring soon!</h3>
    <p class="text-gray-300 text-sm mb-4">Your session will time out in 60 seconds. Please save your work or extend your session.</p>
    <div class="flex justify-end space-x-2">
      <button class="px-4 py-2 bg-gray-700 dark:bg-gray-800 text-gray-200 rounded hover:bg-gray-600 dark:hover:bg-gray-700 text-sm transition duration-300">Cancel</button>
      <button class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 text-sm transition duration-300">Extend Session</button>
    </div>
  </div>
</div>

灰度拟物化粘性导航

用于博客的响应式粘性导航栏，使用灰度调色板以拟物化样式。具有深色模式支持和简单的布局。使用 Tailwind CSS（仅限 HTML）构建，无需 JavaScript。拟物化设计旨在使导航栏看起来像一个物理的、略微凸起的元素。

打开预览

                <nav class="sticky top-0 z-50 bg-gray-200 dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700 shadow-[0_1px_0px_rgba(255,255,255,0.3)_inset,_0_1px_2px_rgba(0,0,0,0.2)] dark:shadow-[0_1px_0px_rgba(255,255,255,0.04)_inset,_0_1px_2px_rgba(0,0,0,0.5)]">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-xl font-semibold text-gray-800 dark:text-gray-100 hover:text-black dark:hover:text-white transition-colors duration-150">
          MySkeuoBlog
        </a>
      </div>

      <!-- Desktop Navigation Links -->
      <div class="hidden sm:flex sm:items-center sm:space-x-3 md:space-x-5">
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          Home
        </a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          Articles
        </a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          Categories
        </a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          About
        </a>
      </div>

      <!-- Mobile menu button (decorative as no JS for toggle) -->
      <div class="sm:hidden flex items-center">
        <button type="button" class="p-2 rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-600" aria-label="Main menu" aria-expanded="false">
          <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

例

描述

打开预览

愿望清单组件

用于社交媒体界面的 3D 风格愿望单组件，具有交互式元素和深色模式支持。

打开预览

                <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Wishlist Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the wishlist item or purpose goes here.</p>
            </div>
        </div>
    </div>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            <div class="flex items-center justify-between">
                <p class="text-gray-800 dark:text-gray-200">Item 1 - Description</p>
                <img src="https://picsum.photos/50/50?image=10" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
            </div>
        </li>
        <li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            <div class="flex items-center justify-between">
                <p class="text-gray-800 dark:text-gray-200">Item 2 - Description</p>
                <img src="https://picsum.photos/50/50?image=20" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
            </div>
        </li>
        <li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            <div class="flex items-center justify-between">
                <p class="text-gray-800 dark:text-gray-200">Item 3 - Description</p>
                <img src="https://picsum.photos/50/50?image=30" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
            </div>
        </li>
    </ul>
    <div class="p-4">
        <button class="w-full bg-blue-600 dark:bg-blue-500 text-white rounded-lg py-2 hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors">Share Wishlist</button>
    </div>
</div>

拟构标头组件

一个简单且响应式的 header 组件，专为具有拟物化风格的电子商务网站设计，使用灰度配色方案并支持深色模式。

打开预览

                <header class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-300 dark:border-gray-700 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">ShopName</h1>
        </div>
        <nav class="flex space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Products</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">About Us</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Contact</a>
        </nav>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full shadow-md">
            <span class="absolute top-0 right-0 bg-red-500 rounded-full h-2 w-2 border-2 border-white dark:border-gray-800"></span>
        </div>
    </div>
</header>

跳至内容链接

跳到内容链接组件，具有 Neumorphism 设计样式、三元配色方案以及适用于博客和内容网站的复杂布局。它包括响应式设计和使用 Tailwind CSS 的深色模式支持。

打开预览

                <a href="#content" class="skip-to-content-link">
  Skip to Content
</a>

<style>
  .skip-to-content-link {
    position: absolute;
    top: -40px;
    left: 0;
    background-color: #5a8f7b; /* One color from a triadic scheme */
    color: #e0f7fa; /* Another color from a triadic scheme */
    padding: 8px 12px;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    /* Neumorphism styles */
    border-radius: 10px;
    box-shadow: 7px 7px 15px rgba(50, 50, 50, 0.2), -7px -7px 15px rgba(255, 255, 255, 0.7);
  }

  .skip-to-content-link:focus {
    top: 10px;
    /* Neumorphism inset effect on focus */
    box-shadow: inset 5px 5px 10px rgba(50, 50, 50, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.7);
  }

  /* Dark mode styles */
  .dark .skip-to-content-link {
    background-color: #2c5f2d; /* Darker shade of the triadic color */
    color: #b2ebf2; /* Lighter shade of the triadic color */
    box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.5), -7px -7px 15px rgba(70, 70, 70, 0.7);
  }

  .dark .skip-to-content-link:focus {
     box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(70, 70, 70, 0.7);
  }

  @media (max-width: 768px) {
    .skip-to-content-link {
      padding: 6px 10px;
    }
  }
</style>

跳至内容链接组件

一个视觉上吸引人的 3D 风格 Skip to Content 链接，可帮助用户绕过社交媒体界面上的导航菜单。该组件使用互补配色方案（蓝色和橙色），并通过阴影和变换实现 3D 效果。具有响应式设计和深色主题支持。该链接在聚焦或激活时固定在视区的左上角，使其易于键盘导航，同时在不使用时保持不显眼。

打开预览

                <!-- Skip to Content Component with 3D Design -->
<div class="relative z-50">
  <!-- Skip link - hidden by default but visible on focus -->
  <a href="#main-content" 
     class="fixed top-4 left-4 transform -translate-y-20 focus:translate-y-0 transition-transform duration-200 ease-in-out
            p-3 rounded-lg
            text-white font-bold
            bg-blue-600 hover:bg-blue-700
            dark:bg-orange-500 dark:hover:bg-orange-600
            focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-blue-400
            shadow-[0.5rem_0.5rem_0px_0px_rgba(237,137,54,0.8)] dark:shadow-[0.5rem_0.5rem_0px_0px_rgba(37,99,235,0.8)]
            transform-gpu hover:translate-y-1 hover:translate-x-1 hover:shadow-[0.3rem_0.3rem_0px_0px_rgba(237,137,54,0.8)] dark:hover:shadow-[0.3rem_0.3rem_0px_0px_rgba(37,99,235,0.8)]
            text-sm md:text-base">
    Skip to Content
  </a>
</div>

<!-- Simulated content for demonstration purposes -->
<header class="w-full bg-gray-100 dark:bg-gray-800 p-4">
  <nav class="flex justify-between items-center">
    <div class="text-blue-600 dark:text-orange-500 font-bold text-xl">SocialApp</div>
    <div class="space-x-4">
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Home</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Profile</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Messages</a>
    </div>
  </nav>
</header>

<!-- Main content that will be skipped to -->
<main id="main-content" class="container mx-auto p-4 mt-4">
  <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Your Feed</h1>
  
  <!-- Sample social media post -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md mb-4">
    <div class="flex items-center mb-3">
      <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-semibold text-gray-900 dark:text-white">Jane Smith</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
      </div>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">Just discovered this amazing 3D design technique! #design #creativity</p>
    <img src="https://picsum.photos/seed/picsum1/600/400" alt="Post image" class="w-full h-64 object-cover rounded-lg mb-3">
    <div class="flex space-x-4">
      <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
        Like
      </button>
      <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        </svg>
        Comment
      </button>
      <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
        </svg>
        Share
      </button>
    </div>
  </div>
  
  <!-- More content to make skipping meaningful -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
      <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Suggested Friends</h2>
      <div class="space-y-3">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
          </div>
          <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white rounded-full text-sm">Follow</button>
        </div>
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-200">Sarah Williams</p>
          </div>
          <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white rounded-full text-sm">Follow</button>
        </div>
      </div>
    </div>
    
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
      <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Trending Topics</h2>
      <div class="space-y-2">
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#3DDesign</div>
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#TailwindCSS</div>
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#WebAccessibility</div>
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#ResponsiveDesign</div>
      </div>
    </div>
  </div>
</main>

页脚导航组件

一个响应式 Footer Navigation 组件，采用拟物化风格设计，具有适用于电子商务的交互式元素。它遵循三色配色方案并支持深色模式。

打开预览

                <footer class="bg-gray-100 dark:bg-gray-900 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex items-center mb-4 md:mb-0">
            <img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-2">
            <h2 class="text-xl font-semibold dark:text-white">Shop Logo</h2>
        </div>
        <nav class="flex flex-col md:flex-row text-gray-600 dark:text-gray-300">
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Products</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">About Us</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Contact</a>
        </nav>
    </div>
    <div class="mt-4 text-center text-gray-600 dark:text-gray-300">
        <p>&copy; 2023 E-Commerce. All rights reserved.</p>
    </div>
</footer>

媒体嵌入组件

适用于博客和内容使用的 Neumorphism 样式的媒体嵌入组件，具有三元配色方案。支持深色模式的响应式设计。

打开预览

                <div class="flex items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">
    <div class="flex flex-col bg-white dark:bg-gray-900 rounded-lg p-4 shadow-lg">
        <img src="https://picsum.photos/400/200" alt="Media Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Media Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media content to provide context to the readers.</p>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-gray-700 dark:text-gray-300">Author Name</span>
        </div>
    </div>
</div>

1 ... 165 166 167 168 169 ... 335