搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

Consulting_Sidebar_Dark_Candy_Complex

一个用于咨询/服务的复杂响应式侧边栏组件，具有深色模式 UI，带有糖果/甜美的色调。包括导航、用户配置文件和快速链接。

                <div class="flex h-screen bg-slate-900 dark:bg-gray-950 text-white font-sans">

  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-slate-800 dark:bg-gray-900 shadow-lg transition-all duration-300 ease-in-out md:translate-x-0" id="sidebar">

    <!-- Sidebar Header/Logo -->
    <div class="flex items-center justify-center h-20 bg-pink-600 dark:bg-pink-700 shadow-md">
      <span class="text-2xl font-bold uppercase tracking-wide text-white">ConsultPro</span>
    </div>

    <!-- User Profile Section -->
    <div class="flex flex-col items-center py-6 border-b border-gray-700 dark:border-gray-800">
      <img class="w-24 h-24 rounded-full border-4 border-pink-400 dark:border-pink-500 shadow-lg" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <p class="mt-3 text-lg font-semibold text-pink-100 dark:text-pink-200">Alice Johnson</p>
      <span class="text-sm text-gray-400 dark:text-gray-500">Senior Consultant</span>
      <div class="flex mt-2 space-x-2">
        <span class="px-3 py-1 text-xs font-semibold text-purple-700 dark:text-purple-300 bg-purple-200 dark:bg-purple-800 rounded-full">Premium</span>
        <span class="px-3 py-1 text-xs font-semibold text-teal-700 dark:text-teal-300 bg-teal-200 dark:bg-teal-800 rounded-full">Active</span>
      </div>
    </div>

    <!-- Navigation Menu -->
    <nav class="flex-1 px-4 py-6 overflow-y-auto custom-scrollbar">
      <ul class="space-y-2">
        <li>
          <a href="#" class="flex items-center p-3 text-pink-100 dark:text-pink-200 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-pink-300 dark:text-pink-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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0C9 9 10 6 11 3s4 3 4 9L9 21z"></path></svg>
            <span class="text-md font-medium">Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 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="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path></svg>
            <span class="text-md font-medium">Clients</span>
            <span class="ml-auto bg-green-500 dark:bg-green-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full">12</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 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="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.01M10 12l2-2 2 2m-2-2v6m0-4h.01"></path></svg>
            <span class="text-md font-medium">Projects</span>
            <span class="ml-auto bg-yellow-500 dark:bg-yellow-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full">New</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="text-md font-medium">Schedule</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 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="M7 8h10M7 12h10M7 16h10M9 3H5C3.895 3 3 3.895 3 5V19c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2h-4M9 3v2c0 1.105-.895 2-2 2H5m14-4v2c0 1.105-.895 2-2 2h-4"></path></svg>
            <span class="text-md font-medium">Reports</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 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="M10.325 4.317c.071-.16.2-.28.35-.38l.608-.433a.997.997 0 011.034 0l.608.433c.15.1.279.22.35.38C14.072 5.097 15 5.928 15 7v3.586a1 1 0 01-.293.707l-3.586 3.586a1 1 0 01-1.414 0L7.293 11.293A1 1 0 017 10.586V7c0-1.072.928-1.903 2.175-2.683zM14 2c1 0 2 .5 2 1.5V11a2 2 0 01-2 2l-3 3c-.5.5-.667.667-1 1s-.5 0-1-1l-3-3a2 2 0 01-2-2V3.5C6 2.5 7 2 8 2h6zM4 17a2 2 0 002 2h12a2 2 0 002-2v-4a1 1 0 00-1-1H5a1 1 0 00-1 1v4z"></path></svg>
            <span class="text-md font-medium">Settings</span>
          </a>
        </li>
      </ul>

      <div class="mt-8">
        <h3 class="text-xs uppercase font-semibold text-gray-400 dark:text-gray-500 mb-2">Quick Links</h3>
        <ul class="space-y-1">
          <li>
            <a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
              <span class="w-2 h-2 rounded-full bg-blue-500 dark:bg-blue-600 mr-2"></span> Latest Articles
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
              <span class="w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-600 mr-2"></span> Upcoming Events
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
              <span class="w-2 h-2 rounded-full bg-orange-500 dark:bg-orange-600 mr-2"></span> My Tasks
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- Sidebar Footer -->
    <div class="p-4 border-t border-gray-700 dark:border-gray-800">
      <button class="flex items-center justify-center w-full px-4 py-2 text-white bg-pink-600 dark:bg-pink-700 rounded-lg shadow-md hover:bg-pink-700 dark:hover:bg-pink-800 transition duration-200 ease-in-out">
        <svg class="h-5 w-5 mr-2" 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 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
        <span>Logout</span>
      </button>
    </div>
  </div>

  <!-- Main Content Area (for demonstration, can be expanded) -->
  <div class="flex-1 flex flex-col p-8">
    <h1 class="text-3xl font-bold text-pink-400 dark:text-pink-300 mb-6">Dashboard Overview</h1>
    <p class="text-gray-300 dark:text-gray-400">Welcome back, Alice! Here's a quick look at your current activities.</p>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
        <h2 class="text-lg font-semibold text-pink-200 mb-2">Active Projects</h2>
        <p class="text-4xl font-bold text-pink-400">23</p>
        <span class="text-sm text-green-400">+5 this month</span>
      </div>
      <div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
        <h2 class="text-lg font-semibold text-pink-200 mb-2">New Clients</h2>
        <p class="text-4xl font-bold text-pink-400">8</p>
        <span class="text-sm text-yellow-400">+2 this week</span>
      </div>
      <div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
        <h2 class="text-lg font-semibold text-pink-200 mb-2">Pending Tasks</h2>
        <p class="text-4xl font-bold text-pink-400">17</p>
        <span class="text-sm text-red-400">Urgent: 3</span>
      </div>
    </div>
  </div>

  <!-- Mobile Sidebar Toggle (hidden on desktop) -->
  <button class="md:hidden fixed top-4 left-4 z-50 p-3 rounded-full bg-pink-600 dark:bg-pink-700 text-white shadow-xl focus:outline-none" onclick="document.getElementById('sidebar').classList.toggle('translate-x-full'); document.getElementById('sidebar').classList.toggle('bg-slate-800'); document.getElementById('sidebar').classList.toggle('dark:bg-gray-900'); this.classList.toggle('translate-x-52');">
    <svg class="h-6 w-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="M4 6h16M4 12h16M4 18h16"></path></svg>
  </button>

  <!-- Overlay for mobile (hidden on desktop) -->
  <div class="md:hidden fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300 ease-in-out opacity-0 pointer-events-none" id="sidebar-overlay"></div>

  <!-- Inline style for custom-scrollbar -->
  <style>
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: #374151; /* gray-700 */
      border-radius: 4px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: #1f2937; /* gray-800 */
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #f472b6; /* pink-400 */
      border-radius: 4px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #ec4899; /* pink-500 */
    }

    /* Mobile specific adjustments using JS for sidebar toggle */
    @media (max-width: 767px) {
      #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        transform: translateX(-100%);
      }
      .toggle-button {
        transition: transform 0.3s ease-in-out;
      }
      .sidebar-open #sidebar {
        transform: translateX(0%);
      }
      .sidebar-open .toggle-button {
        transform: translateX(208px); /* 256px sidebar width - 48px button width */
      }
      .sidebar-open #sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
      }
    }
  </style>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const sidebar = document.getElementById('sidebar');
      const sidebarToggle = document.querySelector('button[onclick*="sidebar"]');
      const sidebarOverlay = document.getElementById('sidebar-overlay');

      sidebarToggle.addEventListener('click', () => {
        document.body.classList.toggle('sidebar-open');
        sidebar.classList.toggle('translate-x-0');
        sidebar.classList.toggle('-translate-x-full'); // Added to ensure it slides off screen
        sidebarOverlay.classList.toggle('opacity-0');
        sidebarOverlay.classList.toggle('pointer-events-none');
        sidebarOverlay.classList.toggle('opacity-100');
        sidebarOverlay.classList.toggle('pointer-events-auto');
      });

      sidebarOverlay.addEventListener('click', () => {
        document.body.classList.remove('sidebar-open');
        sidebar.classList.remove('translate-x-0');
        sidebar.classList.add('-translate-x-full');
        sidebarOverlay.classList.add('opacity-0');
        sidebarOverlay.classList.add('pointer-events-none');
        sidebarOverlay.classList.remove('opacity-100');
        sidebarOverlay.classList.remove('pointer-events-auto');
        // Also revert the button position
        sidebarToggle.classList.remove('translate-x-52');
      });

      // Close sidebar if window resized to desktop from mobile
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) {
          document.body.classList.remove('sidebar-open');
          sidebar.classList.remove('-translate-x-full');
          sidebar.classList.add('translate-x-0');
          sidebarOverlay.classList.add('opacity-0');
          sidebarOverlay.classList.add('pointer-events-none');
          sidebarOverlay.classList.remove('opacity-100');
          sidebarOverlay.classList.remove('pointer-events-auto');
          // Revert button for desktop view
          sidebarToggle.classList.remove('translate-x-52');
        }
      });
    });
  </script>
</div>

社交组件组件

用于天气更新的社交源组件，具有颜色渐变、三色和交互式元素。响应式，支持深色模式。

打开预览

                <div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-cyan-500 via-purple-600 to-rose-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 text-white flex items-center justify-center">
  <div class="max-w-3xl w-full mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700">
    <!-- Header -->
    <div class="p-6 sm:p-8 bg-gradient-to-r from-teal-400 via-blue-500 to-purple-600 dark:from-gray-700 dark:via-blue-800 dark:to-purple-800 text-white flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-bold font-sans tracking-wide">Weather Dispatch</h2>
      <div class="flex items-center space-x-3">
        <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
        </button>
        <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white object-cover">
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="p-6 sm:p-8 space-y-8 text-gray-800 dark:text-gray-200">

      <!-- New Post Section -->
      <div class="bg-white dark:bg-gray-700 rounded-xl p-5 shadow-lg bg-opacity-70 dark:bg-opacity-70">
        <div class="flex items-center space-x-3 mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-500 object-cover">
          <div class="flex-1">
            <textarea class="w-full p-3 bg-gray-100 dark:bg-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-300 resize-none" rows="2" placeholder="Share your weather observations..."></textarea>
          </div>
        </div>
        <div class="flex justify-between items-center">
          <div class="flex space-x-3">
            <button class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
              <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="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 4 4 4-4V5h-2l-4 4-4-4H4v10zm-4-7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
              Photo
            </button>
            <button class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
              <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="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
              Location
            </button>
          </div>
          <button class="px-5 py-2 bg-purple-600 dark:bg-purple-700 text-white rounded-lg font-semibold hover:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 shadow-md">
            Post
          </button>
        </div>
      </div>

      <!-- Weather Forecast Card (Post Example) -->
      <div class="bg-white dark:bg-gray-700 rounded-xl p-5 shadow-lg bg-opacity-70 dark:bg-opacity-70 border border-gray-100 dark:border-gray-600">
        <div class="flex items-center space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-pink-500 object-cover">
          <div>
            <p class="font-semibold text-lg">Alice Johnson</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago • New York, USA</p>
          </div>
        </div>
        <p class="text-lg mb-4 leading-relaxed">Current conditions in NYC: mostly sunny with a high of 72°F. Light breeze from the west. Perfect day for a walk in the park! #WeatherNYC #SunnyDays</p>
        <img src="https://picsum.photos/800/450?random=1" alt="Weather Scene" class="w-full h-auto rounded-lg mb-4 object-cover max-h-64">
        <div class="flex justify-between items-center text-gray-600 dark:text-gray-300">
          <div class="flex space-x-4">
            <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md p-1">
              <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 13.94l-5.11-.99a1 1 0 00-.7-.14l-2.45.42a1 1 0 01-1.07-1.63L13.62 5.3a1 1 0 00-1.74-.9l-3.08 7.21a1 1 0 01-1.84 0L4.38 4.4a1 1 0 00-1.74.9l4.56 8.52a1 1 0 01-1.07 1.63L3.11 13.94a1 1 0 00-.7.14l-2 1a1 1 0 001.37 1.84l2.58-1.29a1 1 0 01.7-.14l2.45.42a1 1 0 001.07-1.63L6.38 5.3a1 1 0 011.74-.9l3.08 7.21a1 1 0 001.84 0l4.56-8.52a1 1 0 00-1.37-1.84l-2.58 1.29a1 1 0 00-.7.14z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">1.2K</span>
            </button>
            <button class="flex items-center hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 rounded-md p-1">
              <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="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">234</span>
            </button>
            <button class="flex items-center hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1">
              <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>
              <span class="hidden sm:inline">57</span>
            </button>
          </div>
          <button class="flex items-center hover:text-purple-500 dark:hover:text-purple-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.977L5.269 9.11A3.001 3.001 0 1010 11.0l4.764-2.91a3 3 0 10-.109-.568l-4.763 2.909-.2-.364-.225-.411zm0 0l.138.688A3 3 0 1015 8z" /></svg>
            <span class="hidden sm:inline">Share</span>
          </button>
        </div>
      </div>

      <!-- Another Post Example (Climate Data) -->
      <div class="bg-white dark:bg-gray-700 rounded-xl p-5 shadow-lg bg-opacity-70 dark:bg-opacity-70 border border-gray-100 dark:border-gray-600">
        <div class="flex items-center space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-cyan-500 object-cover">
          <div>
            <p class="font-semibold text-lg">Mark Davis</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">1 day ago • Research Group</p>
          </div>
        </div>
        <p class="text-lg mb-4 leading-relaxed">Our latest climate model shows increased precipitation patterns in the Amazon basin over the next decade. Critical for understanding ecosystem shifts. #ClimateChange #DataScience</p>
        <figure class="mb-4">
          <img src="https://picsum.photos/800/450?random=2" alt="Climate Data Visualization" class="w-full h-auto rounded-lg object-cover max-h-64">
          <figcaption class="text-center text-sm text-gray-500 dark:text-gray-400 mt-2">Projected precipitation in Amazon Basin.</figcaption>
        </figure>
        <div class="flex justify-between items-center text-gray-600 dark:text-gray-300">
          <div class="flex space-x-4">
            <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md p-1">
              <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 13.94l-5.11-.99a1 1 0 00-.7-.14l-2.45.42a1 1 0 01-1.07-1.63L13.62 5.3a1 1 0 00-1.74-.9l-3.08 7.21a1 1 0 01-1.84 0L4.38 4.4a1 1 0 00-1.74.9l4.56 8.52a1 1 0 01-1.07 1.63L3.11 13.94a1 1 0 00-.7.14l-2 1a1 1 0 001.37 1.84l2.58-1.29a1 1 0 01.7-.14l2.45.42a1 1 0 001.07-1.63L6.38 5.3a1 1 0 011.74-.9l3.08 7.21a1 1 0 001.84 0l4.56-8.52a1 1 0 00-1.37-1.84l-2.58 1.29a1 1 0 00-.7.14z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">843</span>
            </button>
            <button class="flex items-center hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 rounded-md p-1">
              <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="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">150</span>
            </button>
            <button class="flex items-center hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1">
              <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>
              <span class="hidden sm:inline">32</span>
            </button>
          </div>
          <button class="flex items-center hover:text-purple-500 dark:hover:text-purple-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.977L5.269 9.11A3.001 3.001 0 1010 11.0l4.764-2.91a3 3 0 10-.109-.568l-4.763 2.909-.2-.364-.225-.411zm0 0l.138.688A3 3 0 1015 8z" /></svg>
            <span class="hidden sm:inline">Share</span>
          </button>
        </div>
      </div>

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

医疗保健数据表

一个响应式、极简主义的数据表组件，带有企业蓝色调，适用于医疗保健应用。包括深色模式支持、搜索和分页。利用语义 HTML 实现辅助功能。

打开预览

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden ring-1 ring-blue-100 dark:ring-blue-900">
    <div class="px-4 py-5 sm:px-6">
      <h2 class="text-xl sm:text-2xl font-bold leading-tight text-blue-800 dark:text-blue-200">Patient Records</h2>
      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">A list of all patients including their vital information and status.</p>
      <div class="mt-4 flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0 sm:space-x-4">
        <div class="relative flex-grow w-full sm:w-auto">
          <input type="text" placeholder="Search records..." class="block w-full pl-10 pr-2 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <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>
        <button type="button" class="w-full sm:w-auto px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
          <svg class="-ml-1 mr-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="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
          </svg>
          Add Patient
        </button>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-blue-50 dark:bg-gray-700">
          <tr>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
              Patient Name
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
              ID
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
              Last Visit
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
              Condition
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
              Status
            </th>
            <th scope="col" class="relative px-4 py-3">
              <span class="sr-only">Actions</span>
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
          <!-- Row 1 -->
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Patient avatar">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">Jane Cooper</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">PT-00123</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">2023-10-26</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
                Hypertension
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                Active
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
              <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
            </td>
          </tr>

          <!-- Row 2 -->
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Patient avatar">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">Cameron Williamson</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">PT-00124</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">2023-09-15</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">
                Diabetes
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                Active
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
              <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
            </td>
          </tr>

          <!-- Row 3 -->
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Patient avatar">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">Esther Howard</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">PT-00125</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">2023-11-01</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                Asthma
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-800 dark:text-orange-100">
                Pending
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
              <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
            </td>
          </tr>

          <!-- Row 4 -->
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Patient avatar">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">Ralph Edwards</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">PT-00126</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">2023-08-20</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                Flu
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                Inactive
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
              <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
            </td>
          </tr>

          <!-- Row 5 -->
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Patient avatar">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">Annette Black</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">PT-00127</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">2023-10-05</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
                Appendicitis
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
                Critical
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
              <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="px-4 py-3 sm:px-6 flex items-center justify-between flex-wrap border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
      <div class="flex-1 flex justify-between sm:hidden">
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          Previous
        </a>
        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          Next
        </a>
      </div>
      <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
          <p class="text-sm text-gray-700 dark:text-gray-300">
            Showing
            <span class="font-medium">1</span>
            to
            <span class="font-medium">5</span>
            of
            <span class="font-medium">10</span>
            results
          </p>
        </div>
        <div>
          <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600">
              <span class="sr-only">Previous</span>
              <svg class="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="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" aria-current="page" class="z-10 bg-blue-50 dark:bg-blue-900 border-blue-500 text-blue-600 dark:text-blue-200 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              1
            </a>
            <a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              2
            </a>
            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600">
              <span class="sr-only">Next</span>
              <svg class="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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
              </svg>
            </a>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

Industrial Accordion News 组件

用于新闻和新闻网站的工业风格手风琴组件，具有裸露的元素、金属纹理和秋季调色板。它是响应式的，专为多个交互元素而设计，并包含深色模式支持。

打开预览

                <div class="font-sans bg-amber-50 dark:bg-stone-950 p-4 sm:p-8 md:p-12 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-stone-100 dark:bg-stone-900 shadow-xl rounded-lg overflow-hidden border border-stone-300 dark:border-stone-700">
    <h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-orange-300 p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 border-b border-stone-300 dark:border-stone-700 uppercase tracking-wide flex items-center justify-between">
      <span class="flex items-center">
        <svg class="w-7 h-7 sm:w-8 sm:h-8 mr-3 text-orange-600 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a3 3 0 013-3zm6 0a1 1 0 11-2 0V3a1 1 0 112 0v1z" clip-rule="evenodd"></path>
        </svg>
        Latest Dispatches
      </span>
      <span class="text-sm text-stone-600 dark:text-stone-400 hidden md:block">_NEWS_FEED_</span>
    </h2>

    <!-- Accordion Item 1 -->
    <details class="group">
      <summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
        <div class="flex items-center">
          <svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
            The Future of Renewable Energy: A Deep Dive
          </h3>
        </div>
        <span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[ANALYSIS]</span>
        <div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
      </summary>
      <div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 border-b border-stone-200 dark:border-stone-800 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
        <div class="grid md:grid-cols-2 gap-6">
          <div>
            <img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=1" alt="Renewable energy infrastructure">
            <p class="mb-4">Experts predict a global shift towards sustainable power sources, driven by technological advancements and increasing environmental concerns. We explore the latest breakthroughs in solar, wind, and geothermal technologies.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Published: October 26, 2023 - 10:30 AM EST</p>
            <div class="flex items-center mt-3">
              <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Author Avatar">
              <span class="text-sm font-medium text-stone-800 dark:text-stone-200">By Jane Doe, Energy Correspondent</span>
            </div>
          </div>
          <div class="mt-4 md:mt-0">
            <h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Related Readings:</h4>
            <ul class="list-disc list-inside space-y-2 text-sm">
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">The Economic Impact of Green Investments</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Challenges in Grid Modernization</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Case Study: Germany's Energiewende</a></li>
            </ul>
            <a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
              Read Full Article
              <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </details>

    <!-- Accordion Item 2 -->
    <details class="group">
      <summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
        <div class="flex items-center">
          <svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
            Global Markets Stabilize After Volatile Week
          </h3>
        </div>
        <span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[MARKET_REPORT]</span>
        <div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
      </summary>
      <div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 border-b border-stone-200 dark:border-stone-800 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
        <div class="grid md:grid-cols-2 gap-6">
          <div>
            <img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=2" alt="Stock market graphs">
            <p class="mb-4">Major indices showed signs of recovery today as investor confidence slowly returns. Analysts attribute the rebound to stronger-than-expected corporate earnings reports.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Published: October 26, 2023 - 09:00 AM EST</p>
            <div class="flex items-center mt-3">
              <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author Avatar">
              <span class="text-sm font-medium text-stone-800 dark:text-stone-200">By John Smith, Financial Editor</span>
            </div>
          </div>
          <div class="mt-4 md:mt-0">
            <h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Key Economic Indicators:</h4>
            <ul class="list-disc list-inside space-y-2 text-sm">
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Inflation Rates Update</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Unemployment Figures</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Consumer Spending Trends</a></li>
            </ul>
            <a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
              Detailed Report
              <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </details>

    <!-- Accordion Item 3 -->
    <details class="group">
      <summary class="flex justify-between items-center p-4 sm:p-6 cursor-pointer border-b border-stone-200 dark:border-stone-800 bg-stone-100 dark:bg-stone-900 group-hover:bg-stone-200 dark:group-hover:bg-stone-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900 relative">
        <div class="flex items-center">
          <svg class="w-6 h-6 mr-3 text-stone-600 dark:text-stone-400 group-open:text-orange-600 dark:group-open:text-orange-400 transition-transform duration-200 group-open:rotate-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <h3 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">
            Exploration of Mars: New Discoveries Unveiled
          </h3>
        </div>
        <span class="text-sm font-medium text-amber-700 dark:text-amber-500 hidden sm:block">[SCIENCE_NEWS]</span>
        <div class="absolute w-2 h-full bg-orange-600 dark:bg-orange-700 left-0 top-0 opacity-0 group-open:opacity-100 transition-opacity duration-300"></div>
      </summary>
      <div class="p-4 sm:p-6 bg-stone-50 dark:bg-stone-900 text-stone-700 dark:text-stone-300 text-base leading-relaxed">
        <div class="grid md:grid-cols-2 gap-6">
          <div>
            <img class="w-full h-auto rounded-md mb-4 shadow-sm border border-stone-300 dark:border-stone-700" src="https://picsum.photos/600/400?random=3" alt="Mars Rover image">
            <p class="mb-4">NASA's latest rover mission has sent back unprecedented data, hinting at the presence of ancient liquid water formations on the Red Planet. This could revolutionize our understanding of Martian history.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Published: October 25, 2023 - 04:00 PM EST</p>
            <div class="flex items-center mt-3">
              <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Author Avatar">
              <span class="text-sm font-medium text-stone-800 dark:text-stone-200">By Alex Wu, Science Editor</span>
            </div>
          </div>
          <div class="mt-4 md:mt-0">
            <h4 class="text-lg font-semibold text-stone-800 dark:text-orange-300 mb-3 border-b-2 border-orange-600 dark:border-orange-700 pb-1">Space Exploration Milestones:</h4>
            <ul class="list-disc list-inside space-y-2 text-sm">
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Lunar Missions Reaching New Heights</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Private Sector's Role in Space</a></li>
              <li><a href="#" class="text-orange-700 dark:text-orange-500 hover:underline">Search for Exoplanets Update</a></li>
            </ul>
            <a href="#" class="mt-4 inline-flex items-center text-orange-900 dark:text-orange-200 bg-orange-200 dark:bg-orange-800 hover:bg-orange-300 dark:hover:bg-orange-700 px-4 py-2 rounded-md transition-colors duration-200 text-sm font-medium border border-orange-300 dark:border-orange-700 shadow-sm">
              Explore Further
              <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </details>

    <div class="p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 text-center text-xs sm:text-sm text-stone-600 dark:text-stone-400 border-t border-stone-300 dark:border-stone-700">
      <p>Data provided 'as is' for illustrative purposes. All rights reserved &copy; 2023 Industrial News Corp.</p>
    </div>
  </div>
</div>

赛博朋克产品比较组件

一个简单、未来主义的产品比较组件，适用于活动/会议网站，具有深色背景、凉爽的中性色和霓虹灯装饰，营造出赛博朋克美学。响应式，支持深色模式。

打开预览

                <div class="bg-gray-950 dark:bg-black text-gray-200 py-12 px-4 sm:px-6 lg:px-8 font-mono">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center mb-12 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 text-transparent bg-clip-text leading-tight">
      Choose Your Cyber-Experience
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Product Card 1 -->
      <div class="bg-gray-900 dark:bg-gray-950 rounded-lg shadow-lg border border-blue-500/30 dark:border-blue-700/50 transform hover:scale-105 transition-transform duration-300 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-purple-900/10 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-blue-400 dark:text-blue-500 uppercase tracking-wider">Solo-Sync Pass</h3>
          <p class="text-gray-400 mb-6 text-sm">Access to main virtual tracks & networking hub.</p>
          <div class="text-4xl font-extrabold text-white mb-6 animate-pulse-light">
            $99
            <span class="text-base text-gray-500">/event</span>
          </div>
          <ul class="text-gray-300 mb-8 space-y-3">
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-blue-400 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>All Virtual Stages</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-blue-400 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Basic AI-Net Access</li>
            <li class="flex items-center opacity-70"><svg class="w-5 h-5 mr-2 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>No Dedicated Support</li>
          </ul>
          <a href="#" class="block w-full text-center py-3 px-6 rounded-md text-sm font-semibold bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-150 ease-in-out text-white border border-gray-600 hover:border-gray-500">
            Activate Solo-Sync
          </a>
        </div>
      </div>

      <!-- Product Card 2 (Recommended) -->
      <div class="bg-gray-900 dark:bg-gray-950 rounded-lg shadow-lg border-2 border-purple-500 dark:border-purple-700 transform hover:scale-105 transition-transform duration-300 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-900/10 via-pink-900/10 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="absolute top-0 right-0 mt-4 mr-4 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider shadow-lg neon-pulse">
          Recommended
        </div>
        <div class="p-6 relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-purple-400 dark:text-purple-500 uppercase tracking-wider">Nexus Pro Pass</h3>
          <p class="text-gray-400 mb-6 text-sm">Full virtual access, exclusive workshops & premium support.</p>
          <div class="text-4xl font-extrabold text-white mb-6 animate-pulse-strong">
            $249
            <span class="text-base text-gray-500">/event</span>
          </div>
          <ul class="text-gray-300 mb-8 space-y-3">
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-purple-400 dark:text-purple-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>All Virtual Stages & Workshops</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-purple-400 dark:text-purple-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Enhanced AI-Net Access</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-purple-400 dark:text-purple-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Priority Digi-Support</li>
          </ul>
          <a href="#" class="block w-full text-center py-3 px-6 rounded-md text-sm font-semibold bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-purple-400 transition duration-150 ease-in-out text-white neon-button">
            Engage Nexus Protocol
          </a>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-900 dark:bg-gray-950 rounded-lg shadow-lg border border-pink-500/30 dark:border-pink-700/50 transform hover:scale-105 transition-transform duration-300 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-900/10 via-blue-900/10 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-pink-400 dark:text-pink-500 uppercase tracking-wider">Omni-Realm Elite</h3>
          <p class="text-gray-400 mb-6 text-sm">All-inclusive pass for virtual & physical access (if applicable).</p>
          <div class="text-4xl font-extrabold text-white mb-6 animate-pulse-light">
            $499
            <span class="text-base text-gray-500">/event</span>
          </div>
          <ul class="text-gray-300 mb-8 space-y-3">
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-pink-400 dark:text-pink-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Full Access (Virtual + Physical)</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-pink-400 dark:text-pink-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Exclusive Data Streams</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-pink-400 dark:text-pink-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>24/7 Quantum Support</li>
          </ul>
          <a href="#" class="block w-full text-center py-3 px-6 rounded-md text-sm font-semibold bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-pink-400 transition duration-150 ease-in-out text-white border border-gray-600 hover:border-gray-500">
            Unlock Omni-Realm
          </a>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Basic Keyframe Animations for Neon Effect */
    @keyframes pulse-light {
      0%, 100% {
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.4), 0 0 8px rgba(255, 255, 255, 0.2);
      }
      50% {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 255, 255, 0.4);
      }
    }

    @keyframes pulse-strong {
      0%, 100% {
        text-shadow: 0 0 8px #a855f7, 0 0 16px #c084fc;
      }
      50% {
        text-shadow: 0 0 12px #a855f7, 0 0 20px #c084fc, 0 0 30px #e879f9;
      }
    }

    @keyframes neon-button-pulse {
      0%, 100% {
        box-shadow: 0 0 5px rgba(168, 85, 247, 0.7), 0 0 10px rgba(168, 85, 247, 0.5);
      }
      50% {
        box-shadow: 0 0 8px rgba(168, 85, 247, 0.9), 0 0 15px rgba(168, 85, 247, 0.7), 0 0 25px rgba(168, 85, 247, 0.3);
      }
    }

    .animate-pulse-light {
      animation: pulse-light 2s infinite alternate;
    }

    .animate-pulse-strong {
      animation: pulse-strong 2s infinite alternate;
    }

    .neon-pulse {
      text-shadow: 0 0 5px #a855f7, 0 0 10px #c084fc;
      animation: pulse-strong 3s infinite alternate;
    }

    .neon-button {
      animation: neon-button-pulse 2s infinite alternate;
    }

    /* Dark Mode specific adjustments - Tailwind already handles most with dark: prefix */
    .dark .neon-button {
        box-shadow: 0 0 5px rgba(139, 92, 246, 0.7), 0 0 10px rgba(139, 92, 246, 0.5);
    }

    .dark .neon-button:hover {
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.9), 0 0 15px rgba(139, 92, 246, 0.7), 0 0 25px rgba(139, 92, 246, 0.3);
    }

  </style>
</div>

超级菜单组件 - 森林/绿色、微交互、非营利组织

专为非营利组织/慈善网站设计的响应式大型菜单组件，具有森林/绿色调色板、悬停时的微交互和完整的深色模式支持。它提供了'我们的使命'，'我们如何帮助'，'活动与新闻'和'参与其中'的部分。

打开预览

                <nav class="bg-white shadow-lg dark:bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-emerald-700 dark:text-emerald-300 text-2xl font-bold font-serif">Green<span class="text-emerald-500">Heart</span></a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <div class="relative group">
          <button class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">
            About Us
            <svg class="ml-2 -mr-0.5 h-4 w-4 transform group-hover:rotate-180 transition duration-300 ease-in-out" 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="hidden group-hover:block absolute z-50 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
            <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
              <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 dark:bg-gray-700">
                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12a4 4 0 014 4v2H17zm0 0c-4.142 0-7.5-3.358-7.5-7.5S12.858 5 17 5s7.5 3.358 7.5 7.5S21.142 20 17 20zM9 10a1 1 0 011 1v2a1 1 0 102 0v-2a1 1 0 011-1h-.5a1 1 0 100 2h.5V13a1 1 0 01-1 1h-2" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Our Mission</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Learn about our core values and objectives.</p>
                  </div>
                </a>

                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Our Impact</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">See the difference your support makes.</p>
                  </div>
                </a>

                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10m0 0h16m-16 0L8 7m4 0h4m4 0V7m0 0V4m0 0H4" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Team & Board</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Meet the people behind our cause.</p>
                  </div>
                </a>
              </div>
              <div class="px-5 py-5 bg-gray-50 dark:bg-gray-800 sm:px-8 sm:py-8">
                <div>
                  <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide dark:text-gray-400">Recent Stories</h3>
                  <ul class="mt-4 space-y-4">
                    <li class="text-base truncate">
                      <a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
                        Feeding hope: Our latest food drive success
                      </a>
                    </li>
                    <li class="text-base truncate">
                      <a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
                        Clean water for all: Updates from the field
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="mt-5 text-sm">
                  <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-300 dark:hover:text-emerald-200 transition duration-200 ease-in-out">
                    View all stories <span aria-hidden="true">&rarr;</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="relative group ml-8">
          <button class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">
            What We Do
            <svg class="ml-2 -mr-0.5 h-4 w-4 transform group-hover:rotate-180 transition duration-300 ease-in-out" 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="hidden group-hover:block absolute z-50 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
            <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
              <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 dark:bg-gray-700">
                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18s-3.332.477-4.5 1.253" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Environmental Protection</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Preserving biodiversity and natural habitats.</p>
                  </div>
                </a>
                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H3v-3.375m0 0h1.75C7.79 17.027 9.852 18 12 18h2m-4-0h4m-9-3c7.432 0 10.634-2.296 11.235-4.48c.214-.733.018-1.455-.088-2.072 0 0-.714 1.554-1.127 2.015A.75.75 0 0114 10z" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Community Development</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Empowering local communities through sustainable projects.</p>
                  </div>
                </a>
                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                      <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" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Education & Awareness</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Spreading knowledge about environmental issues.</p>
                  </div>
                </a>
              </div>
              <div class="bg-gray-50 dark:bg-gray-800 px-5 py-5 sm:px-8 sm:py-8">
                <div>
                  <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide dark:text-gray-400">Case Studies</h3>
                  <ul class="mt-4 space-y-4">
                    <li class="text-base truncate">
                      <a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
                        Restoring Local Ecosystems
                      </a>
                    </li>
                    <li class="text-base truncate">
                      <a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
                        Sustainable Farming Initiatives
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <a href="#" class="ml-8 px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:border-transparent dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">Events & News</a>
        <a href="#" class="ml-8 px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:border-transparent dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">Get Involved</a>
      </div>

      <div class="-mr-2 flex items-center md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <a href="#" class="bg-emerald-50 block pl-3 pr-4 py-2 border-l-4 border-emerald-500 text-base font-medium text-emerald-700 dark:bg-gray-700 dark:text-emerald-300 dark:border-emerald-300">About Us</a>
      <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:border-gray-500">What We Do</a>
      <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:border-gray-500">Events & News</a>
      <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:border-gray-500">Get Involved</a>
    </div>
  </div>
</nav>

水彩艺术页脚导航组件

一个复杂的响应式页脚导航组件，专为非营利/慈善网站设计，具有水彩艺术风格，具有柔和的棕褐色/棕色色调和深色模式支持。包括多个导航链接、社交媒体图标和一个版权部分。

打开预览

                <footer class="relative bg-gradient-to-br from-amber-50 to-amber-100 font-sans text-amber-950 dark:from-stone-950 dark:to-stone-800 dark:text-stone-100 overflow-hidden pt-12 pb-8">
  <!-- Background texture overlay -->
  <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20" style="background-image: url('https://www.transparenttextures.com/patterns/handmade-paper.png');"></div>

  <div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-10 border-b border-amber-200/50 dark:border-stone-700/50 pb-8">

      <!-- Column 1: Organization Info -->
      <div class="flex flex-col items-center text-center md:items-start md:text-left">
        <div class="w-24 h-24 rounded-full overflow-hidden mb-4 border-2 border-amber-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300">
          <img src="https://picsum.photos/seed/charitylogo/200/200" alt="Non-profit Logo" class="w-full h-full object-cover grayscale brightness-110 contrast-125">
        </div>
        <h3 class="text-2xl font-semibold mb-2 text-amber-900 dark:text-stone-200 font-serif">Hope & Harmony Foundation</h3>
        <p class="text-sm mb-2 text-amber-800 dark:text-stone-300">Fostering a world of compassion and positive change.</p>
        <p class="text-sm text-amber-800 dark:text-stone-300"><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p>
        <p class="text-sm text-amber-800 dark:text-stone-300">(123) 456-7890</p>
      </div>

      <!-- Column 2: Quick Links -->
      <nav class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Quick Links</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Our Mission</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">What We Do</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Impact Stories</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Volunteer</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Donate Now</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
        </ul>
      </nav>

      <!-- Column 3: Resources -->
      <nav class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Resources</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Blog</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Events Calendar</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Annual Reports</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">FAQ</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Contact Us</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
        </ul>
      </nav>

      <!-- Column 4: Newsletter & Social -->
      <div class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Stay Connected</h4>
        <p class="text-sm mb-4 text-amber-800 dark:text-stone-300">Join our newsletter for updates and inspiring stories.</p>
        <form class="w-full max-w-sm mb-6">
          <div class="flex flex-col sm:flex-row gap-2">
            <input type="email" placeholder="Your email address" aria-label="Your email address" class="flex-grow px-4 py-2 rounded-lg bg-amber-50 border border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-all duration-300 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-stone-400 text-sm placeholder-amber-600">
            <button type="submit" class="px-5 py-2 rounded-lg bg-amber-700 text-amber-50 font-semibold shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-50 transition-all duration-300 dark:bg-stone-600 dark:hover:bg-stone-700 dark:ring-offset-stone-900 text-sm whitespace-nowrap">Subscribe</button>
          </div>
        </form>

        <div class="flex space-x-5">
          <a href="#" aria-label="Facebook" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="Twitter" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c1.378 0 2.755-.262 4.025-.783a9.774 9.774 0 003.541-2.274c1.176-1.121 2.05-2.585 2.502-4.148.452-1.563.452-3.178 0-4.741-.452-1.563-1.326-3.027-2.502-4.148a9.774 9.774 0 00-3.541-2.274c-1.27-.521-2.647-.783-4.025-.783S5.535 2.26 4.265 2.783a9.774 9.774 0 00-3.541 2.274C-.399 6.178-.851 7.643-.851 9.206c0 1.563.452 3.027.851 4.148.92 1.085 2.046 1.956 3.375 2.544 1.329.588 2.825.882 4.39.882zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.333 7.822c-.667 1.086-1.581 1.96-2.741 2.622-1.161.662-2.482.993-3.964.993a4.85 4.85 0 01-3.667-1.46c-.958-.92-1.437-2.073-1.437-3.46 0-1.387.479-2.54 1.437-3.46.958-.92 2.18-.92 3.667-.92 1.383 0 2.593.364 3.63 1.093" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="Instagram" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.104.056.333.045.64.174.92.308.57.27.954.607 1.353 1.006.398.399.736.783 1.006 1.352.134.28.263.587.309.92.043.32.056.671.056 3.102V12c0 2.43-.013 2.78-.056 3.104-.045.333-.174.64-.308.92-.27.57-.607.954-1.006 1.353-.399.398-.783.736-1.352 1.006-.28.134-.587.263-.92.309-.32.043-.671.056-3.102.056H12.315c-2.43 0-2.784-.013-3.104-.056-.333-.045-.64-.174-.92-.308-.57-.27-.954-.607-1.353-1.006-.398-.399-.783-.736-1.006-1.352-.134-.28-.263-.587-.309-.92-.043-.32-.056-.671-.056-3.102V12c0-2.43.013-2.78.056-3.104.045-.333.174-.64.308-.92.27-.57.607-.954 1.006-1.353.399-.398.783-.736 1.352-1.006.28-.134.587-.263.92-.309.32-.043.671-.056 3.102-.056H12.315zM12 7.828c-2.322 0-4.207 1.885-4.207 4.207s1.885 4.207 4.207 4.207 4.207-1.885 4.207-4.207S14.322 7.828 12 7.828zm0 1.25c1.637 0 2.957 1.32 2.957 2.957s-1.32 2.957-2.957 2.957-2.957-1.32-2.957-2.957S10.363 9.078 12 9.078zm6.52-.767c0-.528.431-.959.959-.959.528 0 .959.431.959.959s-.431.959-.959.959-.959-.431-.959-.959z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="LinkedIn" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M8.29 20.251c1.378 0 2.755-.262 4.025-.783a9.774 9.774 0 003.541-2.274c1.176-1.121 2.05-2.585 2.502-4.148.452-1.563.452-3.178 0-4.741-.452-1.563-1.326-3.027-2.502-4.148a9.774 9.774 0 00-3.541-2.274c-1.27-.521-2.647-.783-4.025-.783S5.535 2.26 4.265 2.783a9.774 9.774 0 00-3.541 2.274C-.399 6.178-.851 7.643-.851 9.206c0 1.563.452 3.027.851 4.148.92 1.085 2.046 1.956 3.375 2.544 1.329.588 2.825.882 4.39.882zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-5.75 16h-2.5V8h2.5v10zM5 6.75A1.75 1.75 0 115 3.25A1.75 1.75 0 015 6.75zM17 18h-2.5V13.875c0-.625-.525-1.125-1.125-1.125h-.5c-.625 0-1.125.5-1.125 1.125V18h-2.5V8h2.5v1.25h.125c.625-.625 1.375-.75 2.063-.75 2.125 0 2.937 1.25 2.937 3.25V18z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
        </div>
      </div>

    </div>

    <!-- Copyright & Disclaimer -->
    <div class="text-center text-sm text-amber-900/80 dark:text-stone-300/80 pt-6">
      <p>&copy; 2023 Hope & Harmony Foundation. All rights reserved.</p>
      <p class="mt-2">Dedicated to creating a better future for all. <a href="#" class="hover:underline">Privacy Policy</a> | <a href="#" class="hover:underline">Terms of Service</a></p>
    </div>
  </div>
</footer>

下拉菜单组件

一个复杂的响应式下拉菜单组件，专为文档或 Wiki 网站设计，具有干净、简约的瑞士/国际排版风格和海洋/蓝色配色方案。包括深色模式支持和多个交互式元素。

打开预览

                <div class="font-sans antialiased text-gray-800 bg-white dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 md:p-8">

  <!-- Dropdown Container -->
  <div class="relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-blue-700 shadow-sm px-4 py-2 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700 dark:focus:ring-offset-gray-900" id="menu-button" aria-expanded="true" aria-haspopup="true">
        Documentation Sections
        <!-- Heroicon name: solid/chevron-down -->
        <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>
    </div>

    <!-- Dropdown menu, show/hide based on menu state. -->
    <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-blue-700 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <div class="py-1" role="none">
        <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-0">Getting Started</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-1">Core Concepts</a>
      </div>
      <div class="py-1" role="none">
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-2">Advanced Guides</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-3">API Reference</a>
      </div>
      <div class="py-1" role="none">
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-4">Tutorials</a>
        <form method="POST" action="#" role="none">
          <button type="submit" class="text-gray-700 dark:text-gray-300 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-5">Support &amp; FAQ</button>
        </form>
      </div>
    </div>
  </div>

  <!-- Example of another dropdown or related element - for complexity -->
  <div class="relative inline-block text-left ml-4">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-blue-700 shadow-sm px-4 py-2 bg-blue-500 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-offset-gray-900" id="menu-button-2" aria-expanded="true" aria-haspopup="true">
        Version
        <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>
    </div>

    <div class="origin-top-right absolute right-0 mt-2 w-44 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-blue-700 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button-2" tabindex="-1">
      <div class="py-1" role="none">
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v2.0 (Latest)</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v1.5</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v1.0 (Archive)</a>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (example concept - would typically be part of a larger nav) -->
  <div class="sm:hidden mt-8">
    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <!-- Icon when menu is closed. Heroicon name: outline/menu -->
      <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
      <!-- Icon when menu is open. Heroicon name: outline/x -->
      <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>

    <div class="space-y-1 px-2 pt-2 pb-3 hidden" id="mobile-menu">
      <a href="#" class="bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Getting Started</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">Core Concepts</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">Advanced Guides</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">API Reference</a>
    </div>
  </div>

</div>

Back to Top Button 组件

适用于电子商务网站的响应式“Back to Top”按钮组件，采用黑白单色设计，具有明亮的强调色，并在悬停时提供引人入胜的微交互。包括深色模式支持。

打开预览

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Back to Top Button -->
  <a href="#top" aria-label="Scroll back to top of page" class="group outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 rounded-full">
    <button class="relative w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 flex items-center justify-center bg-white dark:bg-gray-800 rounded-full shadow-lg transition-all duration-300 ease-in-out transform group-hover:-translate-y-1 group-focus:-translate-y-1 group-active:-translate-y-1 group-hover:scale-105 group-focus:scale-105 group-active:scale-105 overflow-hidden border border-gray-200 dark:border-gray-700">
      <!-- Background accent on hover -->
      <div class="absolute inset-0 bg-purple-500 rounded-full scale-0 group-hover:scale-100 group-focus:scale-100 group-active:scale-100 transition-transform duration-300 ease-out"></div>
      
      <!-- SVG Icon -->
      <svg class="relative w-6 h-6 md:w-7 md:h-7 lg:w-8 lg:h-8 text-gray-800 dark:text-white group-hover:text-white dark:group-hover:text-white transition-colors duration-300 ease-in-out" 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>
    </button>
  </a>
</div>

Back to Top Button 组件

一个响应式、视觉上吸引人的“返回顶部”按钮，具有三重配色方案、渐变和平滑过渡，适用于作品集网站，包括深色模式支持。

打开预览

                <div class="fixed bottom-6 right-6 z-50">
  <!-- The button is initially hidden and would be revealed by JS on scroll -->
  <!-- For demonstration, it's always visible here. In a real app, add a 'hidden' class by default -->
  <button aria-label="Scroll to top" class="group flex h-14 w-14 items-center justify-center rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
    bg-gradient-to-br from-emerald-400 via-teal-500 to-blue-600
    dark:from-emerald-600 dark:via-teal-700 dark:to-blue-800">
    <svg class="h-8 w-8 text-white transition-transform duration-300 ease-in-out group-hover:-translate-y-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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </button>
</div>

1 ... 41 42 43 44 45 ... 335