Search Components

All Components

Browse all available Tailwind CSS components

Consulting_Sidebar_Dark_Candy_Complex

A complex, responsive sidebar component for consulting/services, featuring a dark mode UI with candy/sweet color accents. Includes navigation, user profile, and quick links.

Open Preview

                <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>

Social Components Component

A social feed component for weather updates, featuring color gradients, triadic colors, and interactive elements. Responsive with dark mode support.

Open Preview

                <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>

A responsive, minimalist data table component with corporate blue tones, suitable for healthcare applications. Includes dark mode support, search, and pagination. Utilizes semantic HTML for accessibility.

Open Preview

                <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 Component

An industrial-style accordion component for news and journalism websites, featuring exposed elements, metallic textures, and an autumn color palette. It is responsive, designed for multiple interactive elements, and includes dark mode support.

Open Preview

                <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>

Cyberpunk Product Comparison Component

A simple, futuristic product comparison component for event/conference websites, featuring a dark background, cool neutral colors, and neon accent for a cyberpunk aesthetic. Responsive with dark mode support.

Open Preview

                <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>

Mega Menu Component - Forest/Green, Microinteractions, Non-profit

A responsive mega menu component designed for non-profit/charity websites, featuring a forest/green color palette, microinteractions on hover, and full dark mode support. It provides sections for 'Our Mission', 'How We Help', 'Events & News', and 'Get Involved'.

Open Preview

                <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>

Watercolor Artistic Footer Navigation Component

A complex, responsive footer navigation component designed for non-profit/charity websites, featuring a watercolor artistic style with soft, sepia/brown tones and dark mode support. Includes multiple navigation links, social media icons, and a copyright section.

Open Preview

                <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>

Dropdown Menu Component

A complex, responsive dropdown menu component designed for documentation or wiki sites, featuring a clean, minimalist Swiss/International Typography style with an Ocean/Blue color scheme. Includes dark mode support and multiple interactive elements.

Open Preview

                <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 Component

A responsive 'Back to Top' button component for e-commerce sites, featuring a black and white monochrome design with a bright accent color, and an engaging microinteraction on hover. Includes dark mode support.

Open Preview

                <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 Component

A responsive, visually appealing 'Back to Top' button with a triadic color scheme, gradient, and smooth transitions, suitable for a portfolio site, including dark mode support.

Open Preview

                <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

Search Components

Categories

All Components

Consulting_Sidebar_Dark_Candy_Complex

Social Components Component

Healthcare Data Table

Industrial Accordion News Component

Cyberpunk Product Comparison Component

Mega Menu Component - Forest/Green, Microinteractions, Non-profit

Watercolor Artistic Footer Navigation Component

Dropdown Menu Component

Back to Top Button Component

Back to Top Button Component