Search Components

Hamburger Menu

Three-line icon menu common on mobile devices

Hamburger Menu Component for Food/Restaurant (Memphis Pastel)

A simple, responsive hamburger menu component for food/restaurant websites, featuring a Memphis Design aesthetic with pastel colors. Includes dark mode support.

Open Preview

                <nav class="bg-pink-100 dark:bg-sky-950 p-4 shadow-md font-sans">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-orange-500 dark:text-orange-300 text-3xl font-bold tracking-tight transform -rotate-3 hover:scale-105 transition-transform duration-300 ease-in-out">
      <span class="block">YUM!</span>
      <span class="text-blue-400 dark:text-blue-200 text-sm block font-normal mt-0.5">Menu</span>
    </a>

    <!-- Desktop Menu -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 items-center">
      <a href="#home" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Home
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#menu" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Our Menu
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#offers" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Special Offers
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#contact" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <button class="px-6 py-2 rounded-full bg-orange-400 dark:bg-orange-600 text-white dark:text-gray-100 text-lg font-bold shadow-lg transform -skew-x-6 hover:skew-x-0 hover:scale-105 transition-all duration-300 ease-in-out">
        Order Now!
      </button>
    </div>

    <!-- Mobile Hamburger Button (visible on small screens) -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-purple-600 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8 transform rotate-6 hover:rotate-0 transition-transform 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="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, shown with JS) -->
  <div id="mobile-menu" class="md:hidden hidden bg-pink-50 dark:bg-sky-900 border-t border-purple-200 dark:border-sky-800 mt-4 py-4 rounded-b-lg shadow-inner">
    <div class="flex flex-col items-center space-y-4">
      <a href="#home" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Home
      </a>
      <a href="#menu" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Our Menu
      </a>
      <a href="#offers" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Special Offers
      </a>
      <a href="#contact" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Contact
      </a>
      <button class="mt-4 px-8 py-3 rounded-full bg-orange-400 dark:bg-orange-600 text-white dark:text-gray-100 text-xl font-bold shadow-lg transform -skew-x-6 hover:skew-x-0 hover:scale-105 transition-all duration-300 ease-in-out w-4/5">
        Order Now!
      </button>
    </div>
  </div>
</nav>

<!-- JavaScript to toggle the mobile menu -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    button.addEventListener('click', function() {
      menu.classList.toggle('hidden');
    });
  });
<\/script>

Art Deco Sport/Fitness Hamburger Menu

A complex, responsive hamburger menu component with an Art Deco aesthetic, pastel color scheme, and dark mode support, suitable for sports and fitness applications.

Open Preview

                <div class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen font-sans overflow-hidden">
  <!-- Header Section -->
  <header class="relative z-20 p-4 sm:p-6 lg:p-8 flex items-center justify-between shadow-lg backdrop-blur-sm bg-white/70 dark:bg-gray-900/70 border-b-4 border-opacity-70 border-purple-300 dark:border-gray-600">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50/50?random=1" alt="Team Logo" class="rounded-full shadow-md border-2 border-purple-400 dark:border-gray-500">
      <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white tracking-wider uppercase text-shadow-art-deco">
        <span class="text-purple-600 dark:text-purple-300">Elite</span> <span class="text-pink-600 dark:text-pink-300">Athletics</span>
      </h1>
    </div>

    <!-- Mobile Hamburger Toggle -->
    <input type="checkbox" id="menu-toggle" class="hidden peer">
    <label for="menu-toggle" class="relative z-50 flex flex-col justify-between w-8 h-6 xl:hidden cursor-pointer group">
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:rotate-45 peer-checked:translate-y-2.5"></span>
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:opacity-0"></span>
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:-rotate-45 peer-checked:-translate-y-2.5"></span>
    </label>

    <!-- Desktop Navigation -->
    <nav class="hidden xl:flex space-x-8 text-lg font-semibold">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Schedule
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Team
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Results
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Shop
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Contact
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
    </nav>
  </header>

  <!-- Mobile Navigation (Off-canvas) -->
  <nav class="fixed inset-0 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-950 dark:via-gray-850 dark:to-gray-750 flex flex-col justify-center items-center space-y-8 text-2xl font-bold transition-transform duration-500 -translate-x-full peer-checked:translate-x-0 z-40 shadow-xl overflow-y-auto px-4 py-16">
    <div class="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'><defs><pattern id=\'art-deco-pattern\' width=\'100\' height=\'100\' patternUnits=\'userSpaceOnUse\'><path d=\'M0 0 L100 0 L50 50 Z M50 50 L100 100 L0 100 Z\' fill=\'none\' stroke=\'rgba(0,0,0,0.1)\' stroke-width=\'1\'/><circle cx=\'50\' cy=\'50\' r=\'5\' fill=\'rgba(0,0,0,0.1)\'/></pattern></defs><rect width=\'100%\' height=\'100%\' fill=\'url(%23art-deco-pattern)\'/></svg>'); background-size: 100px 100px;"></div>

    <div class="relative z-10 flex flex-col items-center space-y-6 sm:space-y-8">
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-purple-200 dark:hover:bg-gray-600 hover:text-purple-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-purple-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[50ms]">
        <i class="fas fa-home mr-3 text-purple-600 dark:text-purple-300"></i> Home
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-pink-200 dark:hover:bg-gray-600 hover:text-pink-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-pink-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[100ms]">
        <i class="fas fa-calendar-alt mr-3 text-pink-600 dark:text-pink-300"></i> Schedule
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-yellow-200 dark:hover:bg-gray-600 hover:text-yellow-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-yellow-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[150ms]">
        <i class="fas fa-users mr-3 text-yellow-600 dark:text-yellow-300"></i> Team
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-green-200 dark:hover:bg-gray-600 hover:text-green-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-green-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[200ms]">
        <i class="fas fa-clipboard-list mr-3 text-green-600 dark:text-green-300"></i> Results
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-blue-200 dark:hover:bg-gray-600 hover:text-blue-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-blue-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[250ms]">
        <i class="fas fa-shopping-cart mr-3 text-blue-600 dark:text-blue-300"></i> Shop
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-indigo-200 dark:hover:bg-gray-600 hover:text-indigo-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-indigo-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[300ms]">
        <i class="fas fa-envelope mr-3 text-indigo-600 dark:text-indigo-300"></i> Contact
      </a>
    </div>

    <!-- Social Media Links -->
    <div class="relative z-10 flex space-x-6 mt-8 sm:mt-12 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[350ms]">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors text-3xl"><i class="fab fa-facebook"></i></a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-pink-600 dark:hover:text-pink-300 transition-colors text-3xl"><i class="fab fa-twitter"></i></a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-yellow-600 dark:hover:text-yellow-300 transition-colors text-3xl"><i class="fab fa-instagram"></i></a>
    </div>

    <!-- User Mini-Profile -->
    <div class="relative z-10 flex items-center space-x-4 mt-8 sm:mt-12 p-4 bg-white/70 dark:bg-gray-800/70 rounded-lg shadow-lg border-2 border-purple-300 dark:border-gray-600 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[400ms]">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-gray-500 shadow-md">
      <div>
        <p class="text-gray-800 dark:text-gray-100 text-lg font-semibold">John "The Bolt" Doe</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Athlete - Running</p>
      </div>
    </div>
  </nav>

  <!-- Main Content Area (for visual context) -->
  <main class="p-8 text-center text-gray-800 dark:text-gray-200 z-10 relative">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-6 mt-12 leading-tight text-shadow-art-deco-light">
      Unleash Your Inner <span class="text-pink-600 dark:text-pink-300">Champion</span>
    </h2>
    <p class="text-lg sm:text-xl max-w-2xl mx-auto mb-12 opacity-90">
      Dedicated to excellence in sports and fitness. Join our community and elevate your performance.
    </p>
    <div class="flex justify-center flex-wrap gap-6">
      <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
        <div class="bg-white/80 dark:bg-gray-800/80 rounded-xl p-6 shadow-xl border-4 border-purple-300 dark:border-gray-600 backdrop-blur-sm transform transition-transform hover:scale-105 duration-300">
          <img class="w-full h-48 object-cover rounded-md mb-4 border-2 border-purple-400 dark:border-gray-500" src="https://picsum.photos/400/300?random=2" alt="Training Session">
          <h3 class="text-2xl font-bold mb-2 text-purple-700 dark:text-purple-200">Training Sessions</h3>
          <p class="text-gray-700 dark:text-gray-300">Discover personalized training programs for all skill levels.</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
        <div class="bg-white/80 dark:bg-gray-800/80 rounded-xl p-6 shadow-xl border-4 border-pink-300 dark:border-gray-600 backdrop-blur-sm transform transition-transform hover:scale-105 duration-300">
          <img class="w-full h-48 object-cover rounded-md mb-4 border-2 border-pink-400 dark:border-gray-500" src="https://picsum.photos/400/300?random=3" alt="Team Sports">
          <h3 class="text-2xl font-bold mb-2 text-pink-700 dark:text-pink-200">Team Sports</h3>
          <p class="text-gray-700 dark:text-gray-300">Join a team and experience the thrill of competitive play.</p>
        </div>
      </div>
    </div>
  </main>

  <!-- Art Deco Geometric Background Elements (Absolute Positioning) -->
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10">
    <!-- Top Left Triangle -->
    <div class="absolute top-0 left-0 w-64 h-64 sm:w-80 sm:h-80 bg-purple-300 dark:bg-gray-700 transform rotate-45 -translate-x-1/2 -translate-y-1/2 origin-top-left "></div>
    <div class="absolute top-0 left-0 w-48 h-48 sm:w-64 sm:h-64 bg-pink-300 dark:bg-gray-600 transform rotate-45 -translate-x-1/2 -translate-y-1/2 origin-top-left translate-x-16 translate-y-16 "></div>

    <!-- Bottom Right Chevron -->
    <div class="absolute bottom-0 right-0 w-64 h-32 sm:w-80 sm:h-40 bg-yellow-300 dark:bg-gray-700 transform rotate-45 translate-x-1/4 translate-y-1/4 origin-bottom-right"></div>
    <div class="absolute bottom-0 right-0 w-48 h-24 sm:w-64 sm:h-32 bg-purple-300 dark:bg-gray-600 transform rotate-45 translate-x-1/4 translate-y-1/4 origin-bottom-right -translate-x-16 -translate-y-8"></div>

    <!-- Middle Horizontal Bars -->
    <div class="absolute left-1/4 top-1/2 -translate-y-1/2 w-1/2 h-8 bg-pink-300 dark:bg-gray-700 rounded-full transform rotate-3 z-0"></div>
    <div class="absolute left-1/4 top-[calc(50%+2rem)] -translate-y-1/2 w-1/2 h-8 bg-purple-300 dark:bg-gray-600 rounded-full transform -rotate-3 z-0"></div>
  </div>

  <style>
    .text-shadow-art-deco {
      text-shadow: 2px 2px 0px rgba(109, 40, 217, 0.2), 4px 4px 0px rgba(219, 39, 119, 0.2);
      /* Combined purple and pink shadow */
    }

    .dark .text-shadow-art-deco {
      text-shadow: 2px 2px 0px rgba(82, 82, 91, 0.5), 4px 4px 0px rgba(37, 99, 235, 0.2);
    }

    .text-shadow-art-deco-light {
      text-shadow: 1px 1px 0px rgba(109, 40, 217, 0.1), 2px 2px 0px rgba(219, 39, 119, 0.1);
      /* Lighter for main heading copy */
    }

    .dark .text-shadow-art-deco-light {
      text-shadow: 1px 1px 0px rgba(82, 82, 91, 0.3), 2px 2px 0px rgba(37, 99, 235, 0.1);
    }

    /* Prevent scrolling when menu is open */
    body.menu-open {
      overflow: hidden;
    }

    /* Use JS for adding/removing menu-open class on body */
    /* Example (add this script manually elsewhere, not in the provided HTML context): */
    /*
    document.getElementById('menu-toggle').addEventListener('change', function() {
      if (this.checked) {
        document.body.classList.add('menu-open');
      } else {
        document.body.classList.remove('menu-open');
      }
    });
    */
  </style>
  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>

Hamburger Menu Component

A minimalist and responsive hamburger menu component with a gradient rainbow color scheme, designed for dating/social platforms, featuring dark mode support.

Open Preview

                <div class="relative bg-white dark:bg-gray-900 md:flex md:items-center md:justify-between p-4 shadow-md">
  <div class="flex items-center justify-between">
    <a href="#" class="text-2xl font-bold bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500 text-transparent bg-clip-text">
      Connectify
    </a>
    <!-- Mobile menu button -->
    <button id="menu-button" class="md:hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-400" aria-label="Toggle menu">
      <svg class="w-6 h-6 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="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>
  </div>

  <!-- Mobile menu content -->
  <nav id="mobile-menu" class="hidden md:flex md:items-center md:space-x-8 mt-4 md:mt-0">
    <a href="#matches" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Matches</a>
    <a href="#chat" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Chat</a>
    <a href="#discover" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:shadow-outline rounded-lg md:inline md:mt-0">Discover</a>
    <a href="#profile" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Profile</a>
    <a href="#settings" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Settings</a>
  </nav>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    menuButton.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
    });
  });
</script>

A responsive hamburger menu component inspired by Memphis Design with a sepia/brown color scheme, suitable for entertainment/media platforms. It includes dark mode support and playful geometric accents.

Open Preview

                <div class="relative bg-amber-50 dark:bg-stone-900 overflow-hidden font-sans text-stone-800 dark:text-stone-200">
  <div class="container mx-auto px-4 py-6 md:py-8 relative z-10">
    <div class="flex items-center justify-between">
      <div class="flex-shrink-0">
        <a href="#" class="text-2xl md:text-3xl font-extrabold tracking-tight text-amber-800 dark:text-amber-300 transform -skew-x-6 inline-block py-1 px-3 border-4 border-amber-800 dark:border-amber-300 rotate-2">
          STREAMIFY
        </a>
      </div>
      <div class="hidden md:flex space-x-8 lg:space-x-12 items-center">
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Home</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Movies</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Series</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Explore</a>
        <button class="px-6 py-2 bg-amber-800 text-amber-50 rounded-full font-bold shadow-lg hover:bg-amber-900 border-2 border-transparent transition duration-300 ease-in-out dark:bg-amber-600 dark:text-stone-900 dark:hover:bg-amber-700 dark:hover:text-stone-50 border-amber-800 dark:border-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50">
          Sign In
        </button>
      </div>
      <div class="md:hidden flex items-center">
        <button id="menu-button" class="text-stone-800 dark:text-stone-200 p-2 focus:outline-none transform scale-125">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (Invisible by default, will be toggled by JS) -->
  <div id="mobile-menu" class="absolute top-0 left-0 w-full h-screen bg-stone-100 dark:bg-stone-950 transform -translate-x-full transition-transform duration-500 ease-in-out md:hidden flex flex-col justify-center items-center space-y-8 z-50 overflow-hidden">
    <button id="close-menu-button" class="absolute top-6 right-6 text-stone-800 dark:text-stone-200 p-2 focus:outline-none transform scale-150">
      <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse">Home</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-100">Movies</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-200">Series</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-300">Explore</a>
    <button class="mt-8 px-8 py-3 bg-amber-800 text-amber-50 rounded-full font-bold text-xl shadow-lg hover:bg-amber-900 border-2 border-transparent transition duration-300 ease-in-out dark:bg-amber-600 dark:text-stone-900 dark:hover:bg-amber-700 dark:hover:text-stone-50 border-amber-800 dark:border-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50">
      Join Now
    </button>
  </div>

  <!-- Memphis-style geometric accents -->
  <div class="absolute top-0 -left-1/4 w-3/4 h-full bg-amber-200 dark:bg-stone-700 opacity-60 transform -skew-y-6 rotate-3 z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute bottom-0 -right-1/4 w-1/2 h-2/3 bg-amber-400 dark:bg-stone-600 opacity-60 transform skew-y-3 -rotate-6 z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute top-1/4 right-1/4 w-32 h-32 bg-amber-600 dark:bg-amber-800 opacity-70 transform rotate-45 rounded-full z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute bottom-1/4 left-1/4 w-16 h-16 bg-amber-300 dark:bg-stone-500 opacity-80 transform -rotate-30 border-8 border-dashed border-amber-800 dark:border-stone-400 z-0 pointer-events-none"></div>

</div>

<style>
  /* Custom animation delay for pulse effect */
  .animation-delay-100 {
    animation-delay: 0.1s;
  }
  .animation-delay-200 {
    animation-delay: 0.2s;
  }
  .animation-delay-300 {
    animation-delay: 0.3s;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-button');
    const closeMenuButton = document.getElementById('close-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    menuButton.addEventListener('click', function() {
      mobileMenu.classList.remove('-translate-x-full');
      mobileMenu.classList.add('translate-x-0');
      document.body.style.overflow = 'hidden'; // Prevent body scroll when menu is open
    });

    closeMenuButton.addEventListener('click', function() {
      mobileMenu.classList.remove('translate-x-0');
      mobileMenu.classList.add('-translate-x-full');
      document.body.style.overflow = ''; // Allow body scroll
    });

    // Close menu if a menu item is clicked (optional)
    mobileMenu.querySelectorAll('a').forEach(item => {
      item.addEventListener('click', function() {
        mobileMenu.classList.remove('translate-x-0');
        mobileMenu.classList.add('-translate-x-full');
        document.body.style.overflow = '';
      });
    });

    // Close menu on resize if it's open and transitions to desktop view
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 768) { // Tailwind's 'md' breakpoint
        mobileMenu.classList.remove('translate-x-0');
        mobileMenu.classList.add('-translate-x-full');
        document.body.style.overflow = '';
      }
    });
  });
</script>

Hamburger Menu Component

A complex, paper/print-inspired hamburger menu component with candy/sweet colors, designed for government/public service websites. Features a responsive design with dark mode support, mimicking physical paper and print elements with bright, cheerful colors.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-zinc-800 text-slate-800 dark:text-zinc-50 min-h-screen relative">

  <!-- Main Content Area (for demonstration) -->
  <div class="p-8 md:p-12 lg:p-16 flex flex-col items-center justify-center min-h-screen">
    <h1 class="text-3xl md:text-5xl lg:text-6xl font-extrabold text-pink-700 dark:text-pink-400 mb-4 text-center leading-tight tracking-tight drop-shadow-md">
      Public Service Portal
    </h1>
    <p class="text-lg md:text-xl text-center max-w-2xl text-lime-700 dark:text-lime-300 mb-8">
      Your trusted source for government information and public services. Explore our resources.
    </p>
    <img src="https://picsum.photos/seed/public/800/450" alt="Placeholder Image" class="rounded-lg shadow-xl mb-8 border-4 border-l-rose-300 border-t-purple-300 border-r-mint-300 border-b-yellow-300 dark:border-l-rose-600 dark:border-t-purple-600 dark:border-r-emerald-600 dark:border-b-yellow-600 max-w-full h-auto">
    <button class="px-8 py-4 bg-gradient-to-br from-pink-500 to-rose-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 text-lg md:text-xl 
                   border-2 border-pink-700 dark:border-purple-300 
                   relative overflow-hidden group">
      <span class="absolute inset-0 bg-gradient-to-br from-pink-600 to-rose-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
      <span class="relative z-10">Learn More</span>
    </button>
  </div>

  <!-- Hamburger Menu Button -->
  <input type="checkbox" id="menu-toggle" class="hidden peer">
  <label for="menu-toggle" class="fixed top-4 right-4 z-50 p-3 bg-gradient-to-br from-purple-400 to-indigo-500 dark:from-purple-700 dark:to-indigo-800 rounded-full shadow-lg cursor-pointer transition-transform duration-300 hover:scale-105 active:scale-95 
                           border-2 border-purple-600 dark:border-indigo-600 
                           flex flex-col items-center justify-center group w-14 h-14">
    <span class="block w-8 h-1 bg-white rounded-full transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:rotate-45 peer-checked:translate-y-2"></span>
    <span class="block w-8 h-1 bg-white rounded-full my-1 transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:opacity-0"></span>
    <span class="block w-8 h-1 bg-white rounded-full transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:-rotate-45 peer-checked:-translate-y-2"></span>
  </label>

  <!-- Offcanvas Menu Overlay -->
  <div class="fixed inset-0 bg-black/40 dark:bg-black/80 backdrop-blur-sm z-40 opacity-0 pointer-events-none peer-checked:opacity-100 peer-checked:pointer-events-auto transition-opacity duration-500"></div>

  <!-- Offcanvas Menu Content -->
  <nav class="fixed top-0 right-0 h-full w-full max-w-xs md:max-w-sm lg:max-w-md bg-gradient-to-br from-pink-100 to-purple-100 dark:from-zinc-700 dark:to-stone-700 shadow-2xl transform translate-x-full peer-checked:translate-x-0 transition-transform duration-500 ease-in-out z-50 
             p-6 md:p-8 overflow-y-auto 
             border-l-4 border-t-4 border-b-4 border-r-4 
             border-l-pink-400 border-t-purple-400 border-b-green-400 border-r-yellow-400 
             dark:border-l-pink-700 dark:border-t-purple-700 dark:border-b-emerald-700 dark:border-r-yellow-700 
             rounded-bl-3xl border-dashed">

    <div class="text-center mb-8 pb-4 border-b border-rose-300 dark:border-rose-600 relative">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-lime-300 dark:border-lime-500 shadow-md transform -rotate-3 hover:rotate-0 hover:scale-110 transition-all duration-300">
      <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 tracking-wide">Welcome!</h2>
      <p class="text-sm text-gray-600 dark:text-gray-300">Citizen Services</p>

      <!-- Paper Clip Effect -->
      <div class="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-12 bg-gray-300 dark:bg-gray-600 rounded-b-lg shadow-inner z-0 
                   before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-4 before:bg-gradient-to-b before:from-gray-400 before:to-gray-300 dark:before:from-gray-700 dark:before:to-gray-600 before:rounded-t-lg 
                   after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-4 after:h-4 after:rounded-full after:bg-gray-500 dark:after:bg-gray-800 after:shadow-md"></div>

      <!-- Staple Effect -->
      <div class="absolute top-1/2 left-4 -translate-y-1/2 w-3 h-3 bg-gray-400 dark:bg-gray-500 border border-gray-500 dark:border-gray-600 rotate-45 shadow-sm"></div>
      <div class="absolute top-1/2 right-4 -translate-y-1/2 w-3 h-3 bg-gray-400 dark:bg-gray-500 border border-gray-500 dark:border-gray-600 rotate-45 shadow-sm"></div>
    </div>

    <ul class="space-y-4 md:space-y-5">
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-rose-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-pink-300 dark:hover:border-pink-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-rose-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-pink-600 dark:text-pink-400 group-hover:text-pink-800 dark:group-hover:text-pink-200 relative z-10" 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 0a1 1 0 001 1h2a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V9a7 7 0 00-14 0v2z"></path>
          </svg>
          <span class="text-lg font-medium text-pink-800 dark:text-pink-200 group-hover:text-pink-900 dark:group-hover:text-pink-100 relative z-10">Home</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-purple-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-purple-300 dark:hover:border-purple-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-purple-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 relative z-10" 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="text-lg font-medium text-purple-800 dark:text-purple-200 group-hover:text-purple-900 dark:group-hover:text-purple-100 relative z-10">Services</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-lime-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-lime-300 dark:hover:border-emerald-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-lime-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-lime-600 dark:text-lime-400 group-hover:text-lime-800 dark:group-hover:text-lime-200 relative z-10" 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 17v-1.5a2.5 2.5 0 015 0V17c0 .733-.24 1.42-.697 1.984l-.066.079a4.524 4.524 0 01-6.495 0l-.066-.079A3.013 3.013 0 006 17v-1.5a2.5 2.5 0 015 0V17c0 .733-.24 1.42-.697 1.984l-.066.079a4.524 4.524 0 01-6.495 0l-.066-.079A3.013 3 0 006 17v-1.5a2.5 2.5 0 015 0V17z"></path>
          </svg>
          <span class="text-lg font-medium text-lime-800 dark:text-lime-200 group-hover:text-lime-900 dark:group-hover:text-lime-100 relative z-10">News & Updates</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-yellow-300 dark:hover:border-yellow-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-yellow-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-yellow-600 dark:text-yellow-400 group-hover:text-yellow-800 dark:group-hover:text-yellow-200 relative z-10" 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 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586L6 18H4a2 2 0 01-2-2V6a2 2 0 012-2h12a2 2 0 012 2v2z"></path>
          </svg>
          <span class="text-lg font-medium text-yellow-800 dark:text-yellow-200 group-hover:text-yellow-900 dark:group-hover:text-yellow-100 relative z-10">Contact Us</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-indigo-300 dark:hover:border-indigo-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-indigo-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-indigo-600 dark:text-indigo-400 group-hover:text-indigo-800 dark:group-hover:text-indigo-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="text-lg font-medium text-indigo-800 dark:text-indigo-200 group-hover:text-indigo-900 dark:group-hover:text-indigo-100 relative z-10">About Us</span>
        </a>
      </li>
    </ul>

    <!-- Decorative elements mimicking torn paper edge -->
    <div class="absolute bottom-0 left-0 w-full h-8 bg-gradient-to-t from-pink-200/50 to-transparent dark:from-zinc-800/50 dark:to-transparent pointer-events-none 
                before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-stripes-gradient before:bg-[length:16px_16px] before:-skew-y-1 
                after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-4 after:bg-pink-100 dark:after:bg-zinc-700"></div>

    <!-- Sticky Note Section -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 w-48 p-4 bg-yellow-200 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 rounded-lg shadow-lg rotate-3 hover:rotate-0 transition-transform duration-300 
                border-2 border-yellow-300 dark:border-yellow-600 
                flex flex-col items-center justify-center text-center mt-8">
      <p class="text-sm font-semibold mb-2">Important Notice!</p>
      <p class="text-xs">Upcoming policy changes effective Jan 1, 2024. Stay informed!</p>
      <div class="absolute -top-3 left-1/2 -translate-x-1/2 w-6 h-6 bg-red-400 dark:bg-red-600 rounded-full shadow-md border-2 border-red-500 dark:border-red-700 transform rotate-12"></div>
    </div>

  </nav>
</div>


<style>
/* Define the custom stripes gradient for torn paper effect */
.bg-stripes-gradient {
  background-image: linear-gradient(135deg, 
    var(--tw-gradient-stops, 
      rgba(255, 255, 255, 0.1) 0%, 
      rgba(255, 255, 255, 0.1) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, 0.1) 50%, 
      rgba(255, 255, 255, 0.1) 75%, 
      transparent 75%, 
      transparent 100%
    )
  );
  background-size: 16px 16px;
}

/* Dark mode adjustments for stripes */
.dark .bg-stripes-gradient {
  background-image: linear-gradient(135deg, 
    var(--tw-gradient-stops, 
      rgba(0, 0, 0, 0.1) 0%, 
      rgba(0, 0, 0, 0.1) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(0, 0, 0, 0.1) 50%, 
      rgba(0, 0, 0, 0.1) 75%, 
      transparent 75%, 
      transparent 100%
    )
  );
}
</style>

Industrial_Agriculture_Hamburger_Menu

A complex, industrial-themed hamburger menu component with a warm 'sunset' color scheme, designed for agriculture/farming websites. Features exposed elements, raw material aesthetics, and multiple interactive elements, fully responsive with dark mode support.

Open Preview

                <div class="relative bg-gradient-to-br from-orange-600 via-red-700 to-yellow-600 dark:from-gray-900 dark:via-zinc-800 dark:to-stone-900 text-stone-100 dark:text-stone-300 md:rounded-lg shadow-xl overflow-hidden">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="font-black text-2xl tracking-tighter uppercase text-stone-900 dark:text-orange-500 hover:text-stone-800 dark:hover:text-orange-400 transition duration-300">Agri<span class="text-stone-100 dark:text-white">Connect</span></a>
      <span class="hidden md:block text-stone-900 text-opacity-70 dark:text-orange-200 dark:text-opacity-50 text-sm italic">Cultivating the Future</span>
    </div>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex space-x-8 lg:space-x-12">
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Dashboard</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Farms</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Crops</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Analytics</a>
      <a href="#" class="text-stone-900 dark:text-orange-300 hover:text-stone-800 dark:hover:text-orange-500 font-semibold uppercase text-sm tracking-wide transition duration-300 ease-in-out border-b-2 border-transparent hover:border-stone-900 dark:hover:border-orange-500 pb-1">Marketplace</a>
    </nav>

    <!-- User Actions and Mobile Toggle -->
    <div class="flex items-center space-x-4">
      <div class="hidden md:flex items-center space-x-3">
        <button class="p-2 rounded-full ring-2 ring-stone-900 dark:ring-orange-500 text-stone-900 dark:text-orange-500 hover:bg-stone-900 hover:text-orange-300 dark:hover:bg-orange-500 dark:hover:text-stone-900 transition duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-stone-900 dark:focus:ring-orange-500">
          <svg class="w-5 h-5" 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>
        <div class="relative group">
          <img class="w-8 h-8 rounded-full ring-2 ring-stone-900 dark:ring-orange-500 cursor-pointer object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <div class="absolute hidden group-hover:block right-0 mt-2 w-48 bg-stone-800 dark:bg-stone-900 border border-stone-700 dark:border-stone-800 rounded-md shadow-lg py-1 z-20 transition-opacity duration-300 opacity-0 group-hover:opacity-100">
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Settings</a>
            <div class="border-t border-stone-700 dark:border-stone-800 my-1"></div>
            <a href="#" class="block px-4 py-2 text-sm text-stone-300 dark:text-stone-400 hover:bg-stone-700 dark:hover:bg-orange-700 hover:text-white dark:hover:text-white">Sign Out</a>
          </div>
        </div>
      </div>
      
      <button id="mobile-menu-button" class="md:hidden p-2 rounded-md ring-2 ring-stone-900 dark:ring-orange-500 text-stone-900 dark:text-orange-500 hover:bg-stone-900 hover:text-orange-300 dark:hover:bg-orange-500 dark:hover:text-stone-900 transition duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-stone-900 dark:focus:ring-orange-500">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path id="mobile-menu-icon-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
          <path id="mobile-menu-icon-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default) -->
  <nav id="mobile-menu" class="hidden md:hidden absolute left-0 w-full bg-stone-900 dark:bg-stone-950/95 border-t border-stone-800 dark:border-stone-800 py-4 z-10 animate-fade-in-down">
    <div class="px-4 flex flex-col space-y-4">
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Dashboard</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Farms</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Crops</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Analytics</a>
      <a href="#" class="block py-2 px-3 text-orange-300 hover:bg-orange-700 hover:text-white rounded-md transition duration-200">Marketplace</a>
      
      <div class="pt-4 border-t border-stone-800 dark:border-stone-700 mt-4 flex flex-col space-y-3">
        <a href="#" class="flex items-center space-x-2 py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">
          <img class="w-7 h-7 rounded-full ring-1 ring-orange-500 object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <span>My Profile</span>
        </a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Notifications</a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Settings</a>
        <a href="#" class="py-2 px-3 text-stone-300 hover:bg-stone-800 hover:text-orange-300 rounded-md transition duration-200">Sign Out</a>
      </div>
    </div>
  </nav>

  <!-- Simple toggle script for demonstration, in a real app this would be in a JS file -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const button = document.getElementById('mobile-menu-button');
      const menu = document.getElementById('mobile-menu');
      const iconOpen = document.getElementById('mobile-menu-icon-open');
      const iconClose = document.getElementById('mobile-menu-icon-close');

      button.addEventListener('click', function() {
        menu.classList.toggle('hidden');
        iconOpen.classList.toggle('hidden');
        iconClose.classList.toggle('hidden');
      });
    });
  </script>
</div>

Cyberpunk_Hamburger_Menu_Photography

A simple, responsive cyberpunk-themed hamburger menu for photography portfolios, featuring a dark background, bright triadic accent colors for neon aesthetics, and full dark-mode support.

Open Preview

                <header class="bg-black text-gray-200 dark:bg-gray-950 p-4 shadow-lg shadow-fuchsia-800/30 relative z-50">
  <nav class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-2xl font-bold text-teal-400 font-mono tracking-wider hover:text-cyan-300 dark:text-teal-500 dark:hover:text-cyan-400 transition duration-300">
      GLITCH_PIXELS
    </a>

    <!-- Desktop Navigation -->
    <div class="hidden md:flex space-x-8">
      <a href="#gallery" class="text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-fuchsia-500 dark:text-purple-400 dark:hover:text-purple-300 dark:hover:border-purple-400">
        Gallery
      </a>
      <a href="#portfolio" class="text-teal-400 hover:text-teal-300 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-teal-400 dark:text-teal-500 dark:hover:text-teal-400 dark:hover:border-teal-500">
        Portfolio
      </a>
      <a href="#about" class="text-orange-400 hover:text-orange-300 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-orange-400 dark:text-yellow-400 dark:hover:text-yellow-300 dark:hover:border-yellow-400">
        About
      </a>
      <a href="#contact" class="text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide transition duration-300 border-b-2 border-transparent hover:border-fuchsia-500 dark:text-purple-400 dark:hover:text-purple-300 dark:hover:border-purple-400">
        Contact
      </a>
    </div>

    <!-- Mobile Hamburger Button -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-fuchsia-400 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-fuchsia-600 dark:text-purple-400 dark:focus:ring-purple-600">
        <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 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </nav>

  <!-- Mobile Menu (Hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-black dark:bg-gray-950 border-t-2 border-fuchsia-800 dark:border-purple-800 shadow-lg shadow-fuchsia-800/30">
    <div class="flex flex-col p-4 space-y-4">
      <a href="#gallery" class="block text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-fuchsia-800/50 dark:text-purple-400 dark:hover:text-purple-300 dark:border-purple-800/50">
        Gallery
      </a>
      <a href="#portfolio" class="block text-teal-400 hover:text-teal-300 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-teal-800/50 dark:text-teal-500 dark:hover:text-teal-400 dark:border-teal-800/50">
        Portfolio
      </a>
      <a href="#about" class="block text-orange-400 hover:text-orange-300 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 border-b border-orange-800/50 dark:text-yellow-400 dark:hover:text-yellow-300 dark:border-yellow-800/50">
        About
      </a>
      <a href="#contact" class="block text-fuchsia-500 hover:text-fuchsia-400 font-semibold uppercase tracking-wide text-lg py-2 transition duration-300 dark:text-purple-400 dark:hover:text-purple-300">
        Contact
      </a>
    </div>
  </div>
</header>

<!-- Simple JavaScript to toggle the mobile menu -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    button.addEventListener('click', function () {
      menu.classList.toggle('hidden');
    });

    // Close menu when a link is clicked (optional)
    const menuLinks = menu.querySelectorAll('a');
    menuLinks.forEach(link => {
      link.addEventListener('click', () => {
        menu.classList.add('hidden');
      });
    });
  });
</script>

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>

Organic Grayscale Hamburger Menu

A responsive hamburger menu component with an organic, flowing design style using a grayscale color scheme. Ideal for documentation or wiki sites, featuring dark mode support and a smooth transition effect for the menu toggle.

Open Preview

                <div class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <a href="#" class="flex-shrink-0 text-gray-900 dark:text-gray-50 text-2xl font-bold font-serif italic tracking-wide">
      FlowDocs
    </a>

    <!-- Mobile Hamburger Button -->
    <button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 group" aria-label="Toggle menu">
      <div class="space-y-2">
        <span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:translate-y-2 group-focus:rotate-45"></span>
        <span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transition duration-300 ease-in-out group-focus:opacity-0"></span>
        <span class="block h-0.5 w-8 bg-gray-700 dark:bg-gray-300 transform transition duration-300 ease-in-out group-focus:-translate-y-2 group-focus:-rotate-45"></span>
      </div>
    </button>

    <!-- Desktop Menu Items -->
    <div class="hidden lg:flex items-center space-x-8">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        Documentation
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        Guides
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        API
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200 ease-in-out font-medium text-lg">
        Community
      </a>
      <a href="#" class="py-2 px-4 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-lg font-semibold shadow-md">
        Get Started
      </a>
    </div>
  </nav>

  <!-- Mobile Menu (Invisible by default, would be toggled by JS) -->
  <!-- For Tailwind-only, this would typically require a hidden/block class toggle. -->
  <!-- As we are JS-free, this is a conceptual placeholder representing what would animate. -->
  <div class="hidden lg:hidden flex-col items-stretch text-center pb-4 space-y-4 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl shadow-inner">
      Documentation
    </a>
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
      Guides
    </a>
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
      API
    </a>
    <a href="#" class="block py-3 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200 ease-in-out font-medium text-xl">
      Community
    </a>
    <a href="#" class="mx-4 py-3 px-6 rounded-full bg-gray-800 text-gray-50 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-50 transition duration-200 ease-in-out text-xl font-semibold shadow-lg">
      Get Started
    </a>
  </div>
</div>

3D Hamburger Menu Component

A responsive hamburger menu component with a 3D aesthetic, warm neutral color scheme, and dark mode support, suitable for entertainment and media platforms. Features a subtle 3D hover effect.

Open Preview

                <div class="flex items-center justify-center p-4 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen">
  <div class="relative flex flex-col items-end gap-2 p-4 rounded-xl shadow-xl bg-stone-50 dark:bg-stone-700 transition-all duration-300 transform perspective-1000 group">
    <!-- Accessible Checkbox for toggling the menu -->
    <input type="checkbox" id="menu-toggle" class="peer sr-only group-hover:block">

    <!-- Hamburger Icon -->
    <label for="menu-toggle" class="relative z-20 w-8 h-6 flex flex-col justify-between cursor-pointer transition-transform duration-300 ease-in-out group-hover:scale-110 group-hover:rotate-6 perspective-1000">
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out origin-left peer-checked:rotate-45 peer-checked:translate-y-2.5 peer-checked:w-7 shadow-sm dark:shadow-stone-900/50"></span>
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out peer-checked:opacity-0 shadow-sm dark:shadow-stone-900/50"></span>
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out origin-left peer-checked:-rotate-45 peer-checked:-translate-y-2.5 peer-checked:w-7 shadow-sm dark:shadow-stone-900/50"></span>
    </label>

    <!-- Menu Items Container -->
    <nav class="absolute top-0 right-0 w-64 md:w-72 lg:w-80 h-full p-4 pt-16 bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-800 rounded-xl shadow-2xl origin-right transition-transform duration-500 ease-in-out transform scale-x-0 peer-checked:scale-x-100 peer-checked:translate-x-0 rotate-y-0 peer-checked:rotate-y-5 flex flex-col gap-3 opacity-0 peer-checked:opacity-100 pointer-events-none peer-checked:pointer-events-auto hover:z-30 group-focus-within:scale-x-100 group-focus-within:translate-x-0 group-focus-within:opacity-100 group-focus-within:pointer-events-auto">
      <ul class="flex flex-col gap-y-3">
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Home
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Movies
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            TV Shows
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Categories
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            My List
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Settings
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<style>
  /* CSS for 3D perspective and transformations */
  .perspective-1000 {
    perspective: 1000px;
  }

  .rotate-y-0 {
    transform: rotateY(0deg);
  }

  .peer-checked\:rotate-y-5 {
    transform: rotateY(-5deg);
  }

  /* Add a subtle 3D tilt on hover for the entire component for more depth */
  .group:hover {
    transform: rotateX(2deg) rotateY(2deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }

  .dark .group:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  }

  /* Ensure no scrollbar appears if perspective causes slight overflow */
  body { overflow-x: hidden; }
</style>