Search Components

Navigation Enhancement Components

Advanced components that improve website navigation

Agriculture News Card Navigation

A simple, paper/print-inspired navigation component featuring a news card for agriculture and farming websites, using an analogous color scheme. It's fully responsive with dark mode support.

Open Preview

                <nav class="bg-amber-100 dark:bg-gray-800 p-4 shadow-md font-serif border-b-4 border-amber-300 dark:border-gray-700">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="text-xl font-bold text-amber-900 dark:text-amber-100 flex items-center mb-4 md:mb-0">
      <svg class="w-8 h-8 mr-2 text-lime-700 dark:text-lime-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm4-1a1 1 0 00-1 1v4a1 1 0 102 0V9a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
      AgriConnect
    </a>

    <div class="md:hidden flex items-center">
      <button id="menu-button" class="text-amber-900 dark:text-amber-100 focus:outline-none focus:ring-2 focus:ring-amber-500 rounded-md p-2">
        <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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <div id="menu" class="hidden md:flex md:flex-grow md:items-center md:w-auto w-full mt-4 md:mt-0">
      <ul class="flex flex-col md:flex-row md:ml-auto md:space-x-8 space-y-2 md:space-y-0 w-full md:w-auto">
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Home</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">News</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Resources</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Contact</a></li>
      </ul>
    </div>

    <div class="w-full md:w-auto mt-4 md:mt-0 md:ml-8">
      <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-sm border border-amber-200 dark:border-gray-600 flex flex-col md:flex-row items-center space-y-3 md:space-y-0 md:space-x-3 max-w-sm mx-auto md:mx-0">
        <img class="w-16 h-16 rounded-full object-cover border-2 border-amber-300 dark:border-gray-500" src="https://picsum.photos/seed/farmnews/60/60" alt="News thumbnail">
        <div class="flex-grow text-center md:text-left">
          <p class="text-sm font-semibold text-amber-900 dark:text-amber-100 mb-1 leading-tight">Latest: Sustainable Farming Practices</p>
          <a href="#" class="text-xs text-lime-700 dark:text-lime-300 hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>
  </div>

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

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

Luxury_Vibrant_Travel_Navigation

A complex, luxury, and vibrant navigation component designed for travel and tourism websites, featuring sophisticated typography, high-saturation colors, and full responsiveness with dark mode support.

Open Preview

                <nav class="bg-gradient-to-r from-purple-700 via-pink-600 to-orange-500 shadow-xl dark:from-purple-900 dark:via-pink-800 dark:to-orange-700 transition-colors duration-500 ease-in-out">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
    <div class="flex items-center flex-shrink-0">
      <a href="#" class="text-white font-serif text-3xl font-extrabold tracking-wider animate-pulse transition-transform duration-300 hover:scale-105
        bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 via-sky-300 to-lime-300 inline-block py-1 rounded-lg px-2
        dark:from-yellow-200 dark:via-sky-200 dark:to-lime-200">
        LUXVoyage
      </a>
    </div>

    <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-yellow-300 transition-colors duration-300 relative group">
        Destinations
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-sky-300 transition-colors duration-300 relative group">
        Packages
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-sky-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-lime-300 transition-colors duration-300 relative group">
        Experiences
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-lime-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-orange-300 transition-colors duration-300 relative group">
        About Us
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-orange-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
    </div>

    <div class="hidden md:flex items-center space-x-6 lg:space-x-8">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 pl-4 pr-10 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:bg-opacity-30 dark:bg-black dark:bg-opacity-20 dark:placeholder-gray-300 dark:focus:ring-yellow-300 transition-all duration-300 ease-in-out text-sm w-36 lg:w-48">
        <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <button class="flex items-center space-x-2 text-white bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full px-4 py-2 transition-all duration-300 ease-in-out
        shadow-lg hover:shadow-xl">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-yellow-300 select-none">
        <span class="font-medium hidden lg:inline">Account</span>
        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>

       <button id="dark-mode-toggle" class="p-2 rounded-full text-white bg-white bg-opacity-20 hover:bg-opacity-30 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-yellow-300" aria-label="Toggle dark mode">
        <svg class="h-6 w-6 hidden dark:block" fill="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 3v1m0 16v1m9-9h1M3 12H2m15.325 5.5l.707.707M6.707 6.707l-.707-.707M16.95 7.05l.707-.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
        </svg>
        <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
        </svg>
      </button>
    </div>

    <div class="md:hidden flex items-center">
      <button id="mobile-menu-button" class="p-2 text-white hover:text-yellow-300 focus:outline-none focus:text-yellow-300 transition-colors duration-300" aria-label="Open mobile menu">
        <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden pb-4">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col items-center">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Destinations
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Packages
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Experiences
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        About Us
      </a>
      <div class="relative w-full px-4 mt-2">
        <input type="text" placeholder="Search..." class="w-full py-2 pl-4 pr-10 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:bg-opacity-30 dark:bg-black dark:bg-opacity-20 dark:placeholder-gray-300 dark:focus:ring-yellow-300 transition-all duration-300 ease-in-out text-sm">
        <svg class="absolute right-7 top-1/2 -translate-y-1/2 h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <button class="flex items-center justify-center space-x-2 text-white bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full px-4 py-2 mt-2 w-full mx-4 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-yellow-300">
        <span class="font-medium">Account</span>
        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <button id="dark-mode-toggle-mobile" class="p-2 rounded-full text-white bg-white bg-opacity-20 hover:bg-opacity-30 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-yellow-300 mt-2" aria-label="Toggle dark mode">
        <svg class="h-6 w-6 hidden dark:block" fill="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 3v1m0 16v1m9-9h1M3 12H2m15.325 5.5l.707.707M6.707 6.707l-.707-.707M16.95 7.05l.707-.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
        </svg>
        <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

<script>
  // JavaScript for mobile menu toggle
  const mobileMenuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

  mobileMenuButton.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });

  // JavaScript for dark mode toggle
  function toggleDarkMode() {
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.remove('dark');
      localStorage.theme = 'light';
    } else {
      document.documentElement.classList.add('dark');
      localStorage.theme = 'dark';
    }
  }

  // Initial check for dark mode preference
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }

  document.getElementById('dark-mode-toggle').addEventListener('click', toggleDarkMode);
  document.getElementById('dark-mode-toggle-mobile').addEventListener('click', toggleDarkMode);
</script>

Navigation Enhancement Components Component

A responsive navigation component with dark mode support for e-commerce websites. It features a triadic color scheme with a dark background to reduce eye strain.

Open Preview

                <nav class="bg-gray-900 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-white text-lg font-semibold">E-Shop</a>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Products</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Categories</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <input type="text" placeholder="Search..." class="bg-gray-800 text-white px-3 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      <button class="bg-blue-600 dark:bg-green-600 text-white px-4 py-1 rounded-md">Cart</button>
    </div>
  </div>
</nav>

Navigation Enhancement Components

A Retro/Vintage navigation bar with a complex design for professional websites, featuring triadic color scheme and responsive dark theme support.

Open Preview

                <nav class="bg-pink-700 dark:bg-pink-800 p-4">
    <div class="max-w-7xl mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
            <span class="text-yellow-300 dark:text-yellow-200 text-2xl font-bold">MyCompany</span>
        </div>
        <div class="hidden md:flex space-x-6 text-white dark:text-gray-300">
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Home</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">About</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Services</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Contact</a>
        </div>
        <div class="relative">
            <button class="bg-yellow-300 dark:bg-yellow-200 text-black dark:text-black px-4 py-2 rounded-md hover:shadow-lg transition">Login</button>
            <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg hidden group-hover:block">
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Logout</a>
            </div>
        </div>
        <div class="md:hidden">
            <button class="text-white dark:text-gray-300 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" /></svg>
            </button>
        </div>
    </div>
</nav>

<section class="bg-gray-100 dark:bg-gray-900 py-10">
    <div class="max-w-7xl mx-auto text-center">
        <h1 class="text-4xl font-bold text-green-500 dark:text-green-400">Welcome to our Retro Business</h1>
        <p class="mt-2 text-gray-700 dark:text-gray-400">Bringing you the best services with a touch of nostalgia.</p>
        <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=1" alt="Service 1" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service One</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 1.</p>
            </div>
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=2" alt="Service 2" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service Two</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 2.</p>
            </div>
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=3" alt="Service 3" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service Three</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 3.</p>
            </div>
        </div>
    </div>
</section>

Navigation Enhancement Component

A responsive navigation component designed for a portfolio, utilizing a brutalism style with a pastel color scheme and dark mode support.

Open Preview

                <nav class="bg-white dark:bg-gray-800 p-6 flex justify-between items-center shadow-lg">
    <a href="#" class="text-2xl font-bold text-pink-600 dark:text-pink-300">My Portfolio</a>
    <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Projects</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">About</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 text-lg hover:text-pink-600 dark:hover:text-pink-300 transition-all">Contact</a>
    </div>
</nav>

<section class="p-6 bg-gray-100 dark:bg-gray-900">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=1" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, emphasizing its features, technologies used, and challenges faced.</p>
        </div>
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=2" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, focusing on user experience and the development process.</p>
        </div>
        <div class="border-2 border-pink-600 dark:border-pink-300 p-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img src="https://picsum.photos/300/200?random=3" alt="Project Image" class="w-full h-48 object-cover rounded-lg">
            <h3 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the project, detailing the problem solved and feedback received.</p>
        </div>
    </div>
</section>

<section class="p-6 bg-gray-100 dark:bg-gray-900">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200">Meet the Team</h2>
    <div class="flex flex-wrap justify-center space-x-6 mt-6">
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-gray-600 dark:text-gray-400">Frontend Developer</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
            <p class="text-gray-600 dark:text-gray-400">Backend Developer</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-pink-600 dark:border-pink-300">
            <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Adam Johnson</h3>
            <p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
        </div>
    </div>
</section>

Navigation Enhancement Components

A retro/vintage styled navigation component designed for blog and content consumption with dark theme support.

Open Preview

                <nav class="bg-gray-800 text-white p-4 dark:bg-gray-900">
    <div class="container mx-auto flex justify-between items-center">
        <a href="#" class="text-2xl font-bold hover:text-blue-400 dark:hover:text-blue-300">Retro Blog</a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Home</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">About</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Blog</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-white focus:outline-none">
                <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="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Home</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">About</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Blog</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Contact</a>
    </div>
</nav>

<main class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Welcome to the Retro Blog!</h1>
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/150" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
            <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/151" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">Consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/152" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
    </div>
</main>

<footer class="bg-gray-800 text-white p-4 dark:bg-gray-900 mt-8">
    <div class="container mx-auto text-center">
        <p>&copy; 2023 Retro Blog. All rights reserved.</p>
    </div>
</footer>

Navigation Enhancement Components

A responsive navigation component styled with a retro/vintage aesthetic, suited for e-commerce applications, with dark theme support and moderate interactivity.

Open Preview

                <nav class="bg-gray-900 text-white p-4 dark:bg-gray-800">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-xl font-bold hover:text-yellow-400 dark:hover:text-yellow-300">ShopRetro</a>
            <ul class="hidden md:flex space-x-4">
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Home</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Products</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">About Us</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Contact</a></li>
            </ul>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-700 text-white rounded-lg p-2 dark:bg-gray-600" />
            <a href="#" class="relative">
                <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-yellow-400 dark:border-yellow-300" />
                <span class="absolute top-0 right-0 bg-yellow-500 rounded-full h-3 w-3 dark:bg-yellow-300"></span>
            </a>
            <button class="bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:text-gray-900 dark:hover:bg-yellow-300 rounded-lg p-2">Cart</button>
        </div>
    </div>
    <div class="bg-yellow-500 p-4 dark:bg-yellow-400">
        <div class="container mx-auto flex justify-between items-center">
            <p class="text-gray-900 dark:text-gray-800">Free Shipping on orders over $50</p>
            <a href="#" class="bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg p-2">Shop Now</a>
        </div>
    </div>
</nav>

<main class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
    <div class="container mx-auto flex flex-wrap">
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/200" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$19.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/201" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$29.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/202" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$39.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
    </div>
</main>

Navigation Enhancement Component

A glassmorphism-inspired navigation component designed for showcasing portfolio work and products with earth tones and dark mode support. The component features a frosted glass effect, responsive design, and minimal elements.

Open Preview

                <nav class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg border-b border-gray-300 dark:border-gray-700 rounded-lg p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio</span>
    </div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Gallery</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
</nav>

<section class="p-8 bg-gray-50 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">My Work</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Project Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Project Title</h3>
        <p class="text-gray-700 dark:text-gray-300">Brief description of the project goes here. Showcasing work effectively.</p>
      </div>
    </div>
    <!-- Repeat similar divs for more projects -->
  </div>
</section>

Navigation Enhancement Components

A responsive navigation enhancement component for a blog in dark mode style with vibrant colors and moderate complexity features.

Open Preview

                <nav class="bg-gray-900 text-white p-4 shadow-md">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-bold hover:text-blue-400">My Blog</a>
            <a href="#" class="hover:text-blue-400">Home</a>
            <a href="#" class="hover:text-blue-400">About</a>
            <a href="#" class="hover:text-blue-400">Contact</a>
        </div>
        <div class="relative">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white rounded-full pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" />
            <svg class="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35"/>
                <circle cx="10.5" cy="10.5" r="6.5"/>
            </svg>
        </div>
    </div>
</nav>

<section class="bg-gray-800 text-white p-8 mt-4">
    <h2 class="text-2xl font-bold mb-4">Latest Articles</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=1" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 1</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=2" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 2</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=3" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 3</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
    </div>
</section>

<footer class="bg-gray-900 text-white p-4 mt-4">
    <div class="container mx-auto flex justify-between items-center">
        <p class="text-sm">© 2023 My Blog. All rights reserved.</p>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="user avatar" class="w-8 h-8 rounded-full" />
            <span class="text-sm">User Name</span>
        </div>
    </div>
</footer>

Navigation Enhancement Components

A 3D designed navigation component with an analogous color scheme, moderate complexity, suitable for dashboard data visualization and control panels.

Open Preview

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 rounded-lg shadow-lg">
    <div class="container mx-auto flex items-center justify-between">
        <h1 class="text-white text-2xl font-bold">Dashboard</h1>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Home</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
            <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-300 focus:outline-none">
                <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="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Home</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="block text-gray-300 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/51.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700 dark:border-gray-300 mr-3">
        <div class="text-white">
            <p class="text-sm">John Doe</p>
            <p class="text-xs text-gray-400">Admin</p>
        </div>
    </div>
    <div class="mt-4 bg-gray-700 dark:bg-gray-800 rounded-lg shadow-md p-4">
        <h2 class="text-white text-lg font-semibold">Quick Links</h2>
        <ul class="mt-2 space-y-2">
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Profile</a></li>
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Messages</a></li>
            <li><a href="#" class="block text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-105">Alerts</a></li>
        </ul>
    </div>
</nav>