Search Components

All Components

Browse all available Tailwind CSS components

Hamburger Menu Component

A responsive hamburger menu component with a neon/glow effect, high-contrast color scheme, and dark mode support, suitable for fashion and beauty websites.

Open Preview

                <div class="relative bg-gradient-to-br from-purple-900 to-indigo-900 min-h-screen font-sans antialiased dark:from-gray-900 dark:to-black">
  <nav class="relative container mx-auto px-4 py-6 flex items-center justify-between z-20">
    <!-- Logo -->
    <a href="#" class="text-4xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 shadow-text-neon text-shadow-glow-pink-indigo transition-transform duration-300 hover:scale-105">
      LUMINA
    </a>

    <!-- Hamburger Button (Mobile) -->
    <div class="md:hidden">
      <button id="menu-toggle" class="relative w-10 h-10 flex items-center justify-center p-2 rounded-full border-2 border-pink-400 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:border-purple-600 dark:focus:ring-purple-700">
        <span class="block absolute w-7 h-0.5 bg-pink-400 transition-all duration-300 ease-in-out group-hover:bg-pink-300 group-[.open]:h-0 group-[.open]:top-1/2 group-[.open]:-rotate-45 dark:bg-purple-600 dark:group-hover:bg-purple-500" style="top: calc(50% - 7px);"></span>
        <span class="block absolute w-7 h-0.5 bg-pink-400 transition-all duration-300 ease-in-out group-hover:bg-pink-300 group-[.open]:opacity-0 dark:bg-purple-600 dark:group-hover:bg-purple-500"></span>
        <span class="block absolute w-7 h-0.5 bg-pink-400 transition-all duration-300 ease-in-out group-hover:bg-pink-300 group-[.open]:h-0 group-[.open]:top-1/2 group-[.open]:rotate-45 dark:bg-purple-600 dark:group-hover:bg-purple-500" style="top: calc(50% + 6px);"></span>
      </button>
    </div>

    <!-- Desktop Menu -->
    <ul class="hidden md:flex space-x-8 text-lg font-medium">
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">Home</a></li>
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">Products</a></li>
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">About</a></li>
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">Contact</a></li>
    </ul>
  </nav>

  <!-- Mobile Menu (Hidden by default) -->
  <div id="mobile-menu" class="hidden fixed inset-0 bg-gradient-to-br from-purple-800 to-indigo-800 backdrop-blur-md z-10 flex flex-col items-center justify-center space-y-8 md:hidden dark:from-gray-800 dark:to-black dark:border-t dark:border-purple-700 transform -translate-y-full opacity-0 transition-all duration-500 ease-in-out">
    <ul class="text-center space-y-6 text-2xl font-bold flex flex-col justify-center items-center">
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">Home</a></li>
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">Products</a></li>
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">About</a></li>
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">Contact</a></li>
    </ul>
  </div>

  <!-- Content beneath the header for demonstration of z-index and menu overlay -->
  <div class="relative z-0 max-w-4xl mx-auto p-8 rounded-lg mt-10 bg-white/10 backdrop-blur-md shadow-2xl shadow-purple-900/50 dark:bg-gray-800/20 dark:shadow-black/50 border border-purple-500/30 dark:border-gray-700/30">
    <h1 class="text-5xl font-extrabold text-pink-200 mb-6 tracking-wide text-shadow-glow-pink dark:text-purple-300 text-center">
      Elevate Your Beauty
    </h1>
    <p class="text-xl text-gray-100 leading-relaxed dark:text-gray-200 text-center">
      Discover our exquisite collection of beauty essentials designed to illuminate your natural radiance. Experience the future of cosmetics.
    </p>
    <img src="https://picsum.photos/seed/fashion/800/400" alt="placeholder beauty product" class="mt-8 w-full h-auto rounded-lg shadow-xl shadow-pink-500/30 dark:shadow-purple-700/30 border-2 border-pink-400 dark:border-purple-600">
  </div>

  <style>
    /* Custom utility for neon text shadow */
    .text-shadow-glow-pink {
      text-shadow: 0 0 5px rgba(255, 105, 180, 0.7),
                   0 0 10px rgba(255, 105, 180, 0.5),
                   0 0 15px rgba(255, 105, 180, 0.3),
                   0 0 20px rgba(255, 105, 180, 0.2);
    }
    .dark .text-shadow-glow-pink {
      text-shadow: 0 0 5px rgba(160, 0, 255, 0.7),
                   0 0 10px rgba(160, 0, 255, 0.5),
                   0 0 15px rgba(160, 0, 255, 0.3),
                   0 0 20px rgba(160, 0, 255, 0.2);
    }
    .text-shadow-glow-sm {
      text-shadow: 0 0 2px rgba(255, 105, 180, 0.4),
                   0 0 4px rgba(255, 105, 180, 0.3),
                   0 0 6px rgba(255, 105, 180, 0.2);
    }
    .dark .text-shadow-glow-sm {
      text-shadow: 0 0 2px rgba(160, 0, 255, 0.4),
                   0 0 4px rgba(160, 0, 255, 0.3),
                   0 0 6px rgba(160, 0, 255, 0.2);
    }
    .shadow-text-neon {
      text-shadow: 0 0 7px rgba(255, 105, 180, 0.8),
                   0 0 10px rgba(173, 216, 230, 0.6),
                   0 0 15px rgba(128, 0, 128, 0.4);
    }
    .text-shadow-glow-pink-indigo {
      text-shadow: 0 0 8px #f472b6,   /* pink-400 */
                   0 0 12px #a78bfa,  /* violet-400 */
                   0 0 16px #c084fc,  /* purple-400 */
                   0 0 20px rgba(236, 72, 153, 0.3), /* pink-500 */
                   0 0 25px rgba(139, 92, 246, 0.2); /* violet-500 */
    }
  </style>

  <script>
    // This is for demonstration purposes. In a real project, this would be in a separate JS file.
    document.addEventListener('DOMContentLoaded', () => {
      const menuToggle = document.getElementById('menu-toggle');
      const mobileMenu = document.getElementById('mobile-menu');

      menuToggle.addEventListener('click', () => {
        const isOpen = menuToggle.classList.toggle('open');
        if (isOpen) {
          mobileMenu.classList.remove('-translate-y-full', 'opacity-0');
          mobileMenu.classList.add('translate-y-0', 'opacity-100');
        } else {
          mobileMenu.classList.remove('translate-y-0', 'opacity-100');
          mobileMenu.classList.add('-translate-y-full', 'opacity-0');
        }
      });

      // Close mobile menu when a link is clicked
      mobileMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          menuToggle.classList.remove('open');
          mobileMenu.classList.remove('translate-y-0', 'opacity-100');
          mobileMenu.classList.add('-translate-y-full', 'opacity-0');
        });
      });
    });
  </script>
</div>

Manufacturing_Industrial_Grayscale_Paper_Tabs

A simple, responsive tabs component with a paper/print-inspired design and grayscale color scheme, suitable for manufacturing and industrial applications. Includes dark mode support.

Open Preview

                <div class="font-sans bg-gray-100 text-gray-800 p-4 sm:p-6 md:p-8 dark:bg-gray-900 dark:text-gray-200 min-h-screen">

  <div class="max-w-4xl mx-auto bg-white shadow-xl rounded-lg overflow-hidden dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
    
    <div class="border-b border-gray-200 dark:border-gray-700 px-4 pt-4 sm:px-6 sm:pt-6 md:px-8 md:pt-8">
      <nav class="-mb-px flex space-x-4 sm:space-x-6 md:space-x-8 overflow-x-auto pb-4 custom-scrollbar" aria-label="Tabs">
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800" aria-current="page">
          Production Overview
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-700 border-gray-500 dark:text-gray-200 dark:border-gray-400 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Inventory Status
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Quality Control
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Maintenance Logs
        </a>
      </nav>
    </div>

    <div class="p-4 sm:p-6 md:p-8">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 dark:text-gray-100">Inventory Status</h2>
      <div class="prose prose-sm sm:prose dark:prose-invert max-w-none">
        <p class="mb-4 text-gray-700 dark:text-gray-300">Current stock levels and replenishment forecasts are critical for uninterrupted manufacturing processes. Below is a summary of key components and finished goods in our warehouses.</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div class="bg-gray-50 p-4 rounded-md border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
            <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">Raw Materials</p>
            <ul class="list-none p-0 mt-2 space-y-1 text-gray-700 dark:text-gray-300">
                <li>Steel Coils: <span class="font-bold">1200 tons</span> (Capacity: 1500 tons)</li>
                <li>Aluminum Sheets: <span class="font-bold">850 units</span> (Capacity: 1000 units)</li>
                <li>Circuit Boards: <span class="font-bold">3500 units</span> (Capacity: 4000 units)</li>
            </ul>
          </div>
          <div class="bg-gray-50 p-4 rounded-md border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
            <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">Finished Products</p>
            <ul class="list-none p-0 mt-2 space-y-1 text-gray-700 dark:text-gray-300">
                <li>Industrial Pumps (Model X): <span class="font-bold">45 units</span> (Order: 50)</li>
                <li>Precision Robotics (Series Y): <span class="font-bold">18 units</span> (Order: 20)</li>
                <li>Heavy Duty Connectors: <span class="font-bold">980 units</span> (Order: 1000)</li>
            </ul>
          </div>
        </div>

        <figure class="mt-6 mb-4">
          <img src="https://picsum.photos/800/450?random=10" alt="Industrial inventory warehouse" class="w-full h-auto rounded-lg shadow-md border border-gray-200 dark:border-gray-700 object-cover">
          <figcaption class="text-sm text-gray-500 mt-2 text-center dark:text-gray-400">Visual representation of current inventory levels in automated warehouse system.</figcaption>
        </figure>

        <h3 class="text-lg sm:text-xl font-semibold mt-6 mb-2 dark:text-gray-100">Next Delivery Schedule</h3>
        <ul class="list-disc list-inside space-y-1 text-gray-700 dark:text-gray-300">
          <li>Steel Coils: <span class="font-semibold">Expected Oct 25, 2023</span> from Supplier A (PO# 12345)</li>
          <li>Circuit Boards: <span class="font-semibold">Expected Oct 28, 2023</span> from Supplier B (PO# 67890)</li>
          <li>Packaging Material: <span class="font-semibold">Expected Nov 01, 2023</span> from Supplier C (PO# 54321)</li>
        </ul>

      </div>
    </div>

  </div>

  <style>
  /* Custom scrollbar for better appearance */
  .custom-scrollbar::-webkit-scrollbar {
    height: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #e0e0e0; /* Light gray for scrollbar track */
    border-radius: 3px;
  }
  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #4a4a4a; /* Darker gray for dark mode */
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #a0a0a0; /* Medium gray for scrollbar thumb */
    border-radius: 3px;
  }
  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #6b6b6b; /* Slightly lighter gray for dark mode */
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #888; /* Darker gray on hover */
  }
  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #808080;
  }
  </style>
</div>

Two-Factor Authentication Component

A complex, responsive Two-Factor Authentication (2FA) component designed for finance/banking applications, featuring a dark mode UI with a grayscale color scheme. It includes input fields for a code, a resend option, and an explanation of 2FA.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <div class="p-6 sm:p-8 flex flex-col items-center text-center">
      <div class="mb-6">
        <svg class="w-16 h-16 text-gray-800 dark:text-gray-200" 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="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v3h8z"></path>
        </svg>
      </div>
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-3">Two-Factor Authentication</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed mb-6">
        For your security, we've sent a 6-digit verification code to your registered mobile device.
        Please enter it below to continue.
      </p>

      <div class="w-full space-y-4">
        <label for="verification-code" class="sr-only">Verification Code</label>
        <div class="flex justify-center space-x-2 sm:space-x-3">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 1 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 2 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 3 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 4 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 5 of verification code">
          <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="1" class="w-12 h-14 sm:w-14 sm:h-16 text-center text-3xl sm:text-4xl font-bold rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 caret-transparent transition-colors duration-200" value="" aria-label="Digit 6 of verification code">
        </div>

        <button type="submit" class="w-full py-3 px-4 rounded-lg bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 font-semibold shadow-md hover:bg-gray-800 dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 dark:focus:ring-gray-100 dark:focus:ring-offset-gray-800 transition-colors duration-200">
          Verify Code
        </button>
      </div>

      <div class="mt-6 text-sm text-gray-600 dark:text-gray-400">
        Didn't receive the code? 
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium transition-colors duration-200">
          Resend Code
        </a>
      </div>

      <div class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6 w-full text-left">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">What is 2FA?</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
          Two-Factor Authentication (2FA) adds an extra layer of security to your account.
          It requires both your password and a second piece of information (like a code from your phone)
          to verify your identity before granting access.
        </p>
        <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mt-2">
          This protects your account even if your password is stolen.
        </p>
      </div>
    </div>
  </div>
</div>

LuxuryTravelNavBar

A simple, elegant navigation bar component for travel and tourism websites, featuring luxury earth tones, responsive design, and dark mode support.

Open Preview

                <header class="bg-stone-100 dark:bg-stone-900 shadow-sm font-serif text-stone-800 dark:text-stone-200">
  <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center">
    <a href="#" class="text-2xl md:text-3xl font-bold tracking-wide transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
      Voyage Lux
    </a>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex space-x-8 lg:space-x-12">
      <a href="#destinations" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        Destinations
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
      <a href="#journeys" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        Journeys
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
      <a href="#about" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        About Us
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
      <a href="#contact" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        Contact
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
    </nav>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-stone-800 dark:text-stone-200 focus:outline-none">
        <svg class="w-8 h-8" 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>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default, show with JS) -->
  <nav id="mobile-menu" class="hidden md:hidden bg-stone-50 dark:bg-stone-800 py-4 shadow-inner">
    <div class="flex flex-col items-center space-y-4">
      <a href="#destinations" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">Destinations</a>
      <a href="#journeys" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">Journeys</a>
      <a href="#about" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">About Us</a>
      <a href="#contact" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">Contact</a>
    </div>
  </nav>
</header>

<!-- Simple JavaScript to toggle mobile menu (for demonstration, not part of strict HTML/Tailwind only) -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    if (button && menu) {
      button.addEventListener('click', () => {
        menu.classList.toggle('hidden');
      });
    }
  });
</script>

Industrial_Marketplace_Media_Component

A simple, industrial-style media component for a marketplace, featuring an image, title, and price, with a focus on raw materials and utilitarian aesthetics. Uses autumn colors and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md border border-amber-300 dark:border-zinc-700 font-sans">
  <div class="relative overflow-hidden mb-4 rounded-md border-2 border-amber-500 dark:border-zinc-600">
    <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-40 sm:h-48 object-cover transition-transform duration-300 hover:scale-105">
    <span class="absolute top-2 left-2 px-3 py-1 bg-amber-700 dark:bg-amber-600 text-white text-xs font-semibold uppercase rounded-full shadow-sm">New</span>
  </div>
  <h3 class="text-lg sm:text-xl font-bold text-amber-900 dark:text-amber-100 mb-1 leading-tight">
    Industrial Gear Crate
  </h3>
  <p class="text-sm text-amber-800 dark:text-amber-300 mb-3 line-clamp-2">
    A durable and versatile gear crate, perfect for workshop storage. Crafted from reclaimed metal. Made for heavy duty use.
  </p>
  <div class="flex items-center justify-between">
    <span class="text-xl sm:text-2xl font-extrabold text-amber-700 dark:text-amber-400">
      $49.99
    </span>
    <button class="px-4 py-2 bg-amber-600 dark:bg-amber-700 text-white text-sm font-semibold rounded-md shadow-lg hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      Add to Cart
    </button>
  </div>
</div>

Playful Educational Sidebar Navigation

A complex, playful, and responsive sidebar navigation component for educational platforms, featuring earth tones, rounded elements, and dark mode support. Includes user profile, main navigation, course progress, and quick links.

Open Preview

                <div class="flex h-screen bg-orange-50 dark:bg-stone-900 font-sans">

  <!-- Sidebar -->
  <aside class="w-64 bg-amber-100 dark:bg-stone-800 p-6 flex flex-col shadow-lg rounded-r-2xl m-3 transition-all duration-300 ease-in-out md:w-64 sm:w-20 lg:w-72 overflow-hidden hover:w-64 md:hover:w-64 sm:hover:w-64">
    <div class="flex items-center justify-between mb-8 transition-all duration-300 ease-in-out">
      <div class="flex items-center space-x-3">
        <img src="https://picsum.photos/id/64/40/40" alt="Logo" class="w-10 h-10 rounded-full shadow-md" />
        <span class="text-stone-700 dark:text-orange-200 text-xl font-bold truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">LearnBuddy</span>
      </div>
    </div>

    <!-- User Profile -->
    <div class="flex items-center space-x-4 p-4 bg-amber-200 dark:bg-stone-700 rounded-xl mb-8 shadow-sm transition-all duration-300 ease-in-out">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-400 dark:border-stone-600 shadow-md" />
      <div class="flex-grow min-w-0 transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">
        <h3 class="text-stone-800 dark:text-orange-100 text-lg font-semibold truncate">Alex Johnson</h3>
        <p class="text-stone-600 dark:text-orange-300 text-sm truncate">Student</p>
      </div>
    </div>

    <!-- Navigation Links -->
    <nav class="flex-grow space-y-3">
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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 12v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-7-7v10a1 1 0 01-1 1h-3"></path>
        </svg>
        <span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Dashboard</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Dashboard</span>
      </a>
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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 6.253v13.414m0-13.414a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zm0 13.414a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">My Courses</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">My Courses</span>
      </a>
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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.5 8a.5.5 0 11-1 0 .5.5 0 011 0zM12 6a.5.5 0 11-1 0 .5.5 0 011 0zM8.5 8a.5.5 0 11-1 0 .5.5 0 011 0zM12 10a.5.5 0 11-1 0 .5.5 0 011 0zM10 12a.5.5 0 11-1 0 .5.5 0 011 0zM10 14a.5.5 0 11-1 0 .5.5 0 011 0zM12 16a.5.5 0 11-1 0 .5.5 0 011 0zM14 14a.5.5 0 11-1 0 .5.5 0 011 0zM14 12a.5.5 0 11-1 0 .5.5 0 011 0zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Schedule</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Schedule</span>
      </a>
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
        </svg>
        <span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Messages</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Messages</span>
        <span class="bg-red-500 text-white text-xs font-semibold px-2 py-0.5 rounded-full absolute top-2 right-2 sm:relative sm:top-auto sm:right-auto sm:ml-auto transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">3</span>
      </a>
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
        </svg>
        <span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Resources</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Resources</span>
      </a>
    </nav>

    <!-- Course Progress Section -->
    <div class="mt-8">
      <h4 class="text-stone-800 dark:text-orange-200 text-md font-semibold mb-3 truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Your Progress</h4>
      <div class="bg-amber-200 dark:bg-stone-700 p-4 rounded-xl shadow-sm">
        <div class="flex justify-between items-center mb-2">
          <span class="text-stone-700 dark:text-orange-200 text-sm truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">JavaScript Basics</span>
          <span class="text-stone-600 dark:text-orange-300 text-xs transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">75%</span>
        </div>
        <div class="w-full bg-amber-300 dark:bg-stone-600 rounded-full h-2.5">
          <div class="bg-emerald-500 h-2.5 rounded-full" style="width: 75%"></div>
        </div>
        <button class="mt-4 w-full bg-amber-400 dark:bg-stone-500 text-stone-900 dark:text-white py-2 rounded-lg font-bold text-sm hover:bg-amber-500 dark:hover:bg-stone-400 transition-colors duration-200 shadow-md transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Continue Learning</button>
      </div>
    </div>

    <!-- Quick Links / Settings -->
    <div class="mt-auto pt-8 border-t border-amber-300 dark:border-stone-600">
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        <span class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Settings</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Settings</span>
      </a>
      <a href="#" class="flex items-center space-x-4 p-3 rounded-lg text-stone-700 dark:text-orange-200 hover:bg-amber-300 dark:hover:bg-stone-600 transition-colors duration-200 group relative shadow-sm border border-transparent hover:border-amber-400 dark:hover:border-stone-500">
        <svg class="w-6 h-6 flex-shrink-0" 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 class="font-medium truncate transition-opacity duration-300 ease-in-out sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100">Log Out</span>
        <span class="absolute left-full ml-4 whitespace-nowrap text-xs bg-stone-700 text-white px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200 hidden sm:block md:hidden">Log Out</span>
      </a>
    </div>

  </aside>

  <!-- Main Content Area (Optional - for demonstration) -->
  <main class="flex-1 p-6">
    <h1 class="text-3xl font-bold text-stone-800 dark:text-orange-100 mb-6">Welcome to Dashboard</h1>
    <p class="text-stone-700 dark:text-orange-200">This is where your main content would go.</p>
    <p class="text-stone-700 dark:text-orange-200 mt-4">Resize the window to see responsiveness and hover over the sidebar on small screens to expand it.</p>
    <div class="mt-8 p-6 bg-white dark:bg-stone-800 rounded-lg shadow-md">
      <h2 class="text-xl font-semibold text-stone-800 dark:text-orange-100 mb-4">More Content</h2>
      <p class="text-stone-700 dark:text-orange-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <img src="https://picsum.photos/id/1015/600/300" alt="Placeholder Image" class="mt-6 rounded-lg shadow-sm border border-stone-200 dark:border-stone-700">
    </div>
  </main>
</div>

User Profiles Component - Luxury Sepia

A complex, luxury-themed user profiles component with sepia/brown tones, optimized for blog/content sites. Features elegant typography, responsive design, and dark mode support.

Open Preview

                <div class="bg-stone-50 dark:bg-stone-900 min-h-screen p-4 sm:p-6 md:p-8 font-serif text-stone-800 dark:text-stone-200 transition-colors duration-300">

  <!-- Component Header -->
  <div class="text-center mb-12">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-stone-900 dark:text-stone-50 mb-4 tracking-tight leading-tight">
      Our Esteemed Contributors
    </h1>
    <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 max-w-3xl mx-auto opacity-90">
      Discover the brilliant minds behind our captivating content. Each profile reflects their unique expertise and passion.
    </p>
  </div>

  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-12">

    <!-- User Profile Card 1 -->
    <div class="bg-white dark:bg-stone-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-stone-200 dark:border-stone-700 relative">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-50 dark:from-stone-800 via-stone-100 dark:via-stone-700 to-stone-200 dark:to-stone-600 opacity-60 dark:opacity-40 rounded-2xl"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex flex-col items-center text-center mb-6">
          <img class="w-32 h-32 rounded-full object-cover border-4 border-stone-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson Profile">
          <h2 class="text-3xl font-bold mt-4 text-stone-900 dark:text-stone-100">Alice Johnson</h2>
          <p class="text-base text-stone-600 dark:text-stone-400 italic">Senior Editor & Historian</p>
        </div>

        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 border-dotted border-b border-stone-300 dark:border-stone-600 pb-6">
          Alice is a passionate historian specializing in ancient civilizations. Her articles bring the past to life with meticulous research and compelling narratives. She holds a Ph.D. in Archaeology from Oxford University.
        </p>

        <div class="grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Articles Published:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">78</span>
          </div>
          <div class="text-right">
            <p class="font-semibold text-stone-800 dark:text-stone-200 text-right">Joined:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">2018</span>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200 mb-2">Featured Work:</h3>
          <div class="flex space-x-3 overflow-x-auto pb-2 scrollbar-hide">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1018/120/80" alt="Article 1">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1025/120/80" alt="Article 2">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1033/120/80" alt="Article 3">
          </div>
        </div>

        <div class="flex justify-around mt-6 pt-6 border-t border-dotted border-stone-300 dark:border-stone-600">
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm-.195 2.5a.5.5 0 00-.81.65l3.25 4.5a.5.5 0 00.81-.65L4.805 11.5zM15 11a1 1 0 100 2h1a1 1 0 100-2h-1zm-3.342-6.6a1 1 0 00-1.316 0L5.38 8.167A1 1 0 006.18 9.833L9 6.556l2.82 3.277a1 1 0 001.62-.833L10.658 4.4z"></path></svg>
            <span class="hidden sm:inline">View Articles</span>
          </a>
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.586l-1.828 1.828A4 4 0 0012.004 20h4.002A2 2 0 0018 18V9a2 2 0 00-2-2h-1z"></path></svg>
            <span class="hidden sm:inline">Contact</span>
          </a>
        </div>
      </div>
    </div>

    <!-- User Profile Card 2 -->
    <div class="bg-white dark:bg-stone-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-stone-200 dark:border-stone-700 relative">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-50 dark:from-stone-800 via-stone-100 dark:via-stone-700 to-stone-200 dark:to-stone-600 opacity-60 dark:opacity-40 rounded-2xl"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex flex-col items-center text-center mb-6">
          <img class="w-32 h-32 rounded-full object-cover border-4 border-stone-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300" src="https://randomuser.me/api/portraits/men/77.jpg" alt="David Lee Profile">
          <h2 class="text-3xl font-bold mt-4 text-stone-900 dark:text-stone-100">David Lee</h2>
          <p class="text-base text-stone-600 dark:text-stone-400 italic">Science & Technology Writer</p>
        </div>

        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 border-dotted border-b border-stone-300 dark:border-stone-600 pb-6">
          David is an award-winning science journalist with a gift for making complex topics accessible. His work explores breakthroughs in AI, space exploration, and sustainable technologies. He holds an M.S. in Physics.
        </p>

        <div class="grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Articles Published:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">62</span>
          </div>
          <div class="text-right">
            <p class="font-semibold text-stone-800 dark:text-stone-200 text-right">Joined:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">2019</span>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200 mb-2">Featured Work:</h3>
          <div class="flex space-x-3 overflow-x-auto pb-2 scrollbar-hide">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1041/120/80" alt="Article 4">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1043/120/80" alt="Article 5">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1044/120/80" alt="Article 6">
          </div>
        </div>

        <div class="flex justify-around mt-6 pt-6 border-t border-dotted border-stone-300 dark:border-stone-600">
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm-.195 2.5a.5.5 0 00-.81.65l3.25 4.5a.5.5 0 00.81-.65L4.805 11.5zM15 11a1 1 0 100 2h1a1 1 0 100-2h-1zm-3.342-6.6a1 1 0 00-1.316 0L5.38 8.167A1 1 0 006.18 9.833L9 6.556l2.82 3.277a1 1 0 001.62-.833L10.658 4.4z"></path></svg>
            <span class="hidden sm:inline">View Articles</span>
          </a>
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.586l-1.828 1.828A4 4 0 0012.004 20h4.002A2 2 0 0018 18V9a2 2 0 00-2-2h-1z"></path></svg>
            <span class="hidden sm:inline">Contact</span>
          </a>
        </div>
      </div>
    </div>

    <!-- User Profile Card 3 -->
    <div class="bg-white dark:bg-stone-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-stone-200 dark:border-stone-700 relative">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-50 dark:from-stone-800 via-stone-100 dark:via-stone-700 to-stone-200 dark:to-stone-600 opacity-60 dark:opacity-40 rounded-2xl"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex flex-col items-center text-center mb-6">
          <img class="w-32 h-32 rounded-full object-cover border-4 border-stone-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300" src="https://randomuser.me/api/portraits/women/66.jpg" alt="Sophia Kim Profile">
          <h2 class="text-3xl font-bold mt-4 text-stone-900 dark:text-stone-100">Sophia Kim</h2>
          <p class="text-base text-stone-600 dark:text-stone-400 italic">Lifestyle & Travel Blogger</p>
        </div>

        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 border-dotted border-b border-stone-300 dark:border-stone-600 pb-6">
          Sophia captures the essence of global cultures and sustainable living. Her inspiring tales and stunning photography transport readers to vibrant destinations. She is a recognized voice in ethical travel.
        </p>

        <div class="grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Articles Published:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">91</span>
          </div>
          <div class="text-right">
            <p class="font-semibold text-stone-800 dark:text-stone-200 text-right">Joined:</p>
            <span class="text-xl font-bold text-stone-900 dark:text-stone-100">2017</span>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200 mb-2">Featured Work:</h3>
          <div class="flex space-x-3 overflow-x-auto pb-2 scrollbar-hide">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1050/120/80" alt="Article 7">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1052/120/80" alt="Article 8">
            <img class="w-24 h-16 rounded-md object-cover shadow-sm border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-300 cursor-pointer" src="https://picsum.photos/id/1057/120/80" alt="Article 9">
          </div>
        </div>

        <div class="flex justify-around mt-6 pt-6 border-t border-dotted border-stone-300 dark:border-stone-600">
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm-.195 2.5a.5.5 0 00-.81.65l3.25 4.5a.5.5 0 00.81-.65L4.805 11.5zM15 11a1 1 0 100 2h1a1 1 0 100-2h-1zm-3.342-6.6a1 1 0 00-1.316 0L5.38 8.167A1 1 0 006.18 9.833L9 6.556l2.82 3.277a1 1 0 001.62-.833L10.658 4.4z"></path></svg>
            <span class="hidden sm:inline">View Articles</span>
          </a>
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100 transition-colors duration-200 flex items-center">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.586l-1.828 1.828A4 4 0 0012.004 20h4.002A2 2 0 0018 18V9a2 2 0 00-2-2h-1z"></path></svg>
            <span class="hidden sm:inline">Contact</span>
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
/* Hide scrollbar for featured work on Webkit browsers */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
</style>

Accordion Component

A complex, responsive accordion component designed for food/restaurant websites, featuring a clean Swiss/International typography style with a cheerful candy/sweet color scheme. Includes dark mode support.

Open Preview

                <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-pink-50 dark:bg-gray-800 rounded-lg shadow-xl">
  <h2 class="text-4xl font-extrabold text-pink-600 dark:text-pink-400 mb-8 text-center tracking-tight leading-tight">Our Delicious Menu Categories</h2>

  <div class="space-y-4">
    <!-- Accordion Item 1 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
      <input type="checkbox" id="accordion-1" class="hidden peer" />
      <label for="accordion-1" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
        <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Appetizers & Starters</span>
        <svg class="w-8 h-8 text-pink-500 dark:text-pink-400 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
          <div class="flex items-start">
            <img src="https://picsum.photos/id/1080/60/60" alt="Spring Rolls" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Crispy Spring Rolls</h4>
              <p class="text-gray-600 dark:text-gray-300">Vegetable-filled rolls served with sweet chili sauce.</p>
              <span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$6.99</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/400/60/60" alt="Garlic Bread" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Cheesy Garlic Bread</h4>
              <p class="text-gray-600 dark:text-gray-300">Toasted baguette with garlic butter and mozzarella.</p>
              <span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$5.49</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/350/60/60" alt="Hummus Plate" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Classic Hummus Plate</h4>
              <p class="text-gray-600 dark:text-gray-300">Creamy hummus with warm pita bread and olives.</p>
              <span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$7.99</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/900/60/60" alt="Stuffed Mushrooms" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Spinach & Artichoke Dip</h4>
              <p class="text-gray-600 dark:text-gray-300">Creamy dip with tortilla chips and fresh veggies.</p>
              <span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$8.75</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
      <input type="checkbox" id="accordion-2" class="hidden peer" />
      <label for="accordion-2" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
        <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Main Courses</span>
        <svg class="w-8 h-8 text-mint-500 dark:text-mint-400 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
          <div class="flex items-start">
            <img src="https://picsum.photos/id/200/60/60" alt="Grilled Salmon" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Grilled Atlantic Salmon</h4>
              <p class="text-gray-600 dark:text-gray-300">Served with roasted vegetables and lemon-dill sauce.</p>
              <span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$22.50</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/250/60/60" alt="Pasta Primavera" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Creamy Pasta Primavera</h4>
              <p class="text-gray-600 dark:text-gray-300">Fettuccine with seasonal vegetables in a light cream sauce.</p>
              <span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$16.00</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/237/60/60" alt="Beef Steak" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Ribeye Steak (10oz)</h4>
              <p class="text-gray-600 dark:text-gray-300">Grilled to perfection, served with mashed potatoes and aspargus.</p>
              <span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$28.99</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/167/60/60" alt="Mushroom Risotto" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Wild Mushroom Risotto</h4>
              <p class="text-gray-600 dark:text-gray-300">Arborio rice cooked with assorted wild mushrooms and Parmesan.</p>
              <span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$17.50</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
      <input type="checkbox" id="accordion-3" class="hidden peer" />
      <label for="accordion-3" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
        <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Desserts & Sweet Treats</span>
        <svg class="w-8 h-8 text-purple-500 dark:text-purple-400 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
          <div class="flex items-start">
            <img src="https://picsum.photos/id/1025/60/60" alt="Chocolate Cake" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Decadent Chocolate Lava Cake</h4>
              <p class="text-gray-600 dark:text-gray-300">Warm cake with a molten chocolate center, served with ice cream.</p>
              <span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$8.00</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/1050/60/60" alt="Cheesecake" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">New York Style Cheesecake</h4>
              <p class="text-gray-600 dark:text-gray-300">Classic creamy cheesecake with berry compote.</p>
              <span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$7.50</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/1060/60/60" alt="Fruit Tart" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Seasonal Fresh Fruit Tart</h4>
              <p class="text-gray-600 dark:text-gray-300">Buttery crust filled with pastry cream and fresh fruits.</p>
              <span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$7.25</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/1059/60/60" alt="Macarons" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Assorted French Macarons</h4>
              <p class="text-gray-600 dark:text-gray-300">Selection of delicate French macarons (3 pieces).</p>
              <span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$6.50</span>
            </div>
          </div>
        </div>
      </div>
    </div>

     <!-- Accordion Item 4 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
      <input type="checkbox" id="accordion-4" class="hidden peer" />
      <label for="accordion-4" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
        <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Beverages</span>
        <svg class="w-8 h-8 text-blue-500 dark:text-blue-400 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
          <div class="flex items-start">
            <img src="https://picsum.photos/id/225/60/60" alt="Iced Coffee" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Espresso (Various)</h4>
              <p class="text-gray-600 dark:text-gray-300">Selection of hot and iced coffee beverages.</p>
              <span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$3.00 - $5.50</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/220/60/60" alt="Fresh Juice" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Freshly Squeezed Juices</h4>
              <p class="text-gray-600 dark:text-gray-300">Orange, Apple, Carrot, or Mixed Berry.</p>
              <span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$4.75</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/215/60/60" alt="Soft Drinks" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Soft Drinks / Soda</h4>
              <p class="text-gray-600 dark:text-gray-300">Coke, Diet Coke, Sprite, Ginger Ale.</p>
              <span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$2.50</span>
            </div>
          </div>
          <div class="flex items-start">
            <img src="https://picsum.photos/id/210/60/60" alt="Sparkling Water" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Sparkling / Still Water</h4>
              <p class="text-gray-600 dark:text-gray-300">San Pellegrino or Acqua Panna (500ml).</p>
              <span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$3.50</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Product Gallery Component

A responsive product gallery component with a paper/print-inspired design, warm neutrals color scheme, and dark mode support, suitable for entertainment/media platforms.

Open Preview

                <div class="p-4 sm:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl font-bold text-center mb-12 relative text-stone-800 dark:text-stone-200 leading-tight tracking-tight">
      Featured Releases
      <span class="block w-24 h-1.5 bg-yellow-600 dark:bg-yellow-400 mx-auto mt-4 rounded-full"></span>
    </h2>

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

      <!-- Product Card 1 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1025/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">The Echoing Abyss</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">Immerse yourself in a gripping narrative of mystery and suspense. A true cinematic masterpiece.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$19.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            View Details
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-yellow-600 dark:bg-yellow-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          New
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1018/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Whispers of the Stars</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">An epic journey through cosmic wonders and ancient prophecies. Visually stunning!</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$24.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Pre-order Now
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-purple-600 dark:bg-purple-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          Pre-order
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/10/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Lost in the Glitch</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">A mind-bending sci-fi thriller exploring virtual realities and forgotten memories.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$16.50</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1060/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Chronicles of Eldoria</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">A classic fantasy adventure, now remastered in breathtaking 4K UHD. Limited Edition!</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$29.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Buy Now
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-red-600 dark:bg-red-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          Limited
        </div>
      </div>

    </div>

    <div class="mt-16 text-center">
      <button class="px-8 py-4 bg-yellow-600 hover:bg-yellow-700 text-white text-lg font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-400">
        Explore All Products
      </button>
    </div>

  </div>
</div>

<style>
/* Simple 'paper curl' effect for cards (optional, for visual flair) */
.print-effect {
  position: relative;
  /* filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1)); */
}

.print-effect::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 5%;
  width: 90%;
  height: 10px;
  background: rgba(0,0,0,0.05);
  border-radius: 50%;
  filter: blur(4px);
  z-index: -1;
  transition: transform 0.3s ease-out;
}

.print-effect:hover::before {
  transform: scale(1.05);
  background: rgba(0,0,0,0.1);
}

/* Custom animation for badges */
@keyframes pulse-once {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-pulse-once {
  animation: pulse-once 1.2s ease-out 1;
}
</style>

Retro_Vintage_Agriculture_Carousel

A retro/vintage-themed carousel slider component for agriculture/farming websites, featuring monochromatic design, nostalgic 80s/90s aesthetics, and full responsiveness with dark mode support.

Open Preview

                <section class="py-12 bg-lime-50 dark:bg-zinc-900 overflow-hidden font-mono">
  <div class="container mx-auto px-4">
    <h2 class="text-center text-4xl md:text-5xl font-bold mb-12 text-lime-800 dark:text-lime-200 uppercase tracking-widest leading-tight">
      Our Harvest Gallery
    </h2>

    <div class="relative w-full max-w-5xl mx-auto" x-data="{ activeSlide: 0, slides: [ 'https://picsum.photos/1200/600?random=1&seed=agriculture', 'https://picsum.photos/1200/600?random=2&seed=farming', 'https://picsum.photos/1200/600?random=3&seed=tractor', 'https://picsum.photos/1200/600?random=4&seed=crop' ] }">

      <!-- Carousel Wrapper -->
      <div class="relative h-64 md:h-96 lg:h-[400px] overflow-hidden rounded-lg shadow-xl border-4 border-lime-700 dark:border-lime-300 transform -skew-x-3">
        <template x-for="(slide, index) in slides" :key="index">
          <img :src="slide" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-700 ease-in-out" :class="{'opacity-100 transform skew-x-3': activeSlide === index, 'opacity-0': activeSlide !== index}" :alt="'Agricultural image ' + (index + 1)">
        </template>
      </div>

      <!-- Navigation Dots -->
      <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
        <template x-for="(slide, index) in slides" :key="index">
          <button @click="activeSlide = index" :aria-label="'Go to slide ' + (index + 1)" class="w-4 h-4 rounded-full border-2 border-lime-700 dark:border-lime-300 transition-colors duration-300" :class="{'bg-lime-700 dark:bg-lime-300 scale-125': activeSlide === index, 'bg-lime-200 dark:bg-zinc-700': activeSlide !== index}"></button>
        </template>
      </div>

      <!-- Previous Button -->
      <button @click="activeSlide = (activeSlide === 0 ? slides.length - 1 : activeSlide - 1)" class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-lime-700 dark:bg-lime-300 text-white dark:text-zinc-900 p-3 rounded-full shadow-lg transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-600 border-2 border-lime-800 dark:border-lime-200" aria-label="Previous slide">
        <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 19l-7-7 7-7"></path>
        </svg>
      </button>

      <!-- Next Button -->
      <button @click="activeSlide = (activeSlide === slides.length - 1 ? 0 : activeSlide + 1)" class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-lime-700 dark:bg-lime-300 text-white dark:text-zinc-900 p-3 rounded-full shadow-lg transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-600 border-2 border-lime-800 dark:border-lime-200" aria-label="Next slide">
        <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="M9 5l7 7-7 7"></path>
        </svg>
      </button>

      <!-- Caption / Overlay (Retro Aesthetic) -->
      <div class="absolute bottom-16 md:bottom-20 left-1/2 -translate-x-1/2 w-3/4 max-w-sm bg-lime-800/80 dark:bg-zinc-800/80 text-white dark:text-lime-100 p-4 text-center rounded-md border-2 border-lime-900 dark:border-zinc-700 shadow-md transform skew-x-6">
        <p class="text-sm md:text-base font-semibold uppercase tracking-wider italic">Cultivating the Future, One Seed at a Time</p>
      </div>

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

<!-- Alpine.js for basic carousel functionality. This would go in your <head> or before </body> -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

1 ... 82 83 84 85 86 ... 335