Navigation | Code Components Hub

Brutalist E-commerce Navigation Component

A complex and brutalist e-commerce navigation component using Tailwind CSS, featuring a triadic color scheme (Yellow, Cyan, Fuchsia) with high contrast (Black/White), a CSS-only mega-menu, CSS-only search reveal, a CSS-only responsive mobile menu, and dark mode support. HTML only, no JavaScript.

Open Preview

                <nav class="bg-yellow-400 text-black border-b-8 border-black dark:bg-black dark:text-yellow-400 dark:border-yellow-400">
  <div class="container mx-auto px-4 relative">

    <!-- Checkbox for Mobile Menu State - Controls the mobile menu visibility -->
    <input type="checkbox" id="mobile-menu-toggle" class="hidden peer">

    <!-- Main Row: Logo, Desktop Nav, Mobile Toggle Label -->
    <!-- This div is a sibling of the checkbox -->
    <div class="flex justify-between items-center py-6">

      <!-- Logo -->
      <div class="text-3xl font-black uppercase tracking-widest border-4 border-black p-2 dark:border-yellow-400">
        <a href="#" class="hover:text-fuchsia-500 transition duration-300">BRUTAL SHOP</a>
      </div>

      <!-- Desktop Navigation & Icons (Hidden on Mobile) -->
      <div class="hidden md:flex items-center space-x-8">
        <ul class="flex items-center space-x-8 uppercase font-bold">
          <!-- Categories with CSS-only Mega-Menu -->
          <li class="relative group">
            <a href="#" class="hover:text-fuchsia-500 focus:outline-none focus:text-fuchsia-500">Categories</a>
            <!-- Mega-Menu Content (CSS-only via group-hover) -->
            <div class="absolute left-0 top-full mt-2 w-64 bg-cyan-500 text-black p-6 border-4 border-black opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-10 dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
              <h4 class="font-black mb-3 border-b-4 border-black dark:border-cyan-500">Shop By Category</h4>
              <ul class="space-y-2 text-sm">
                <li><a href="#" class="hover:underline">Electronics</a></li>
                <li><a href="#" class="hover:underline">Apparel</a></li>
                <li><a href="#" class="hover:underline">Home Goods</a></li>
                <li><a href="#" class="hover:underline">Books</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#" class="hover:text-fuchsia-500">New Arrivals</a></li>
          <li><a href="#" class="hover:text-fuchsia-500">Deals</a></li>
        </ul>

        <!-- User Icons, Search, Cart -->
        <div class="flex items-center space-x-6 text-2xl">
           <!-- Search Toggle/Input (CSS-only reveal on hover/focus) -->
           <div class="relative group">
               <svg class="w-6 h-6 cursor-pointer hover:text-fuchsia-500" 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>
               <!-- Simple search input reveal on hover/focus -->
               <input type="text" placeholder="Search..." class="absolute right-0 top-full mt-2 px-3 py-2 w-48 border-4 border-black bg-white text-black opacity-0 invisible group-hover:opacity-100 group-hover:visible focus:opacity-100 focus:visible transition-all duration-300 z-10 dark:bg-black dark:text-yellow-400 dark:border-yellow-400">
           </div>

           <!-- User Icon -->
           <a href="#" class="hover:text-fuchsia-500">
               <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
           </a>
           <!-- Wishlist Icon -->
           <a href="#" class="hover:text-fuchsia-500">
              <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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
           </a>
          <!-- Cart Icon with Count -->
          <a href="#" class="relative hover:text-fuchsia-500">
            <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            <span class="absolute -top-2 -right-2 bg-fuchsia-500 text-black text-xs font-bold px-1 rounded-full border-2 border-black dark:border-yellow-400">3</span>
          </a>
        </div>
      </div>

      <!-- Mobile Menu Toggle Label (Visible on Mobile) -->
      <!-- This label controls the hidden checkbox peer -->
      <label for="mobile-menu-toggle" class="md:hidden block cursor-pointer p-2 relative z-20">
           <!-- Hamburger Icon - Spans styled based on the peer-checked state of the checkbox -->
           <div class="space-y-2 peer-checked:space-y-0 peer-checked:rotate-45 transition-transform duration-300">
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:rotate-90 peer-checked:translate-y-1.5 transition-transform duration-300"></span>
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:opacity-0 transition-opacity duration-300"></span>
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:-rotate-90 peer-checked:-translate-y-1.5 transition-transform duration-300"></span>
           </div>
      </label>
    </div>

    <!-- Mobile Menu Content -->
    <!-- This div is a sibling of the checkbox and the main row div -->
    <!-- Its visibility is controlled by the peer-checked state of the checkbox -->
    <div id="mobile-menu" class="md:hidden absolute top-[theme(spacing.20)] left-0 w-full bg-cyan-500 text-black border-t-8 border-black opacity-0 invisible transition-all duration-300 z-10 peer-checked:opacity-100 peer-checked:visible dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
      <div class="px-4 py-6 space-y-6">
         <!-- Search Input - Mobile -->
         <div>
            <input type="text" placeholder="Search..." class="px-3 py-2 w-full border-4 border-black bg-white text-black dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
         </div>
         <!-- Mobile Links -->
         <ul class="space-y-4 uppercase font-bold text-xl">
             <li><a href="#" class="block hover:text-fuchsia-500">Categories</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">New Arrivals</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Deals</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Account</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Wishlist</a></li>
             <li><a href="#" class="flex items-center hover:text-fuchsia-500">
                 Cart <span class="ml-2 bg-fuchsia-500 text-black text-xs font-bold px-1 rounded-full border-2 border-black dark:border-cyan-500">3</span>
             </a></li>
         </ul>
      </div>
    </div>

  </div>
</nav>

E-commerce Navigation Bar

Neumorphism E-commerce Navigation Bar with Earth Tones

Open Preview

                <nav class="bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-700 dark:text-gray-300 font-bold text-xl">E-Shop</div>
    <div class="flex space-x-4">
      <input type="text" placeholder="Search..." class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full py-2 px-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark focus:outline-none">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark">
        Cart
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark">
        Account
      </a>
    </div>
  </div>
</nav>

<style>
  /* Add these to your Tailwind configuration */
  /*
  module.exports = {
    theme: {
      extend: {
        boxShadow: {
          'neumorphic-light': '9px 9px 16px rgb(163,177,198,.6), -9px -9px 16px rgba(255,255,255, .5)',
          'neumorphic-dark': '9px 9px 16px rgba(0,0,0,.6), -9px -9px 16px rgba(50, 50, 50, .5)',
          'neumorphic-inset-light': 'inset 3px 3px 7px rgba(163,177,198,.6), inset -3px -3px 7px rgba(255,255,255,.5)',
          'neumorphic-inset-dark': 'inset 3px 3px 7px rgba(0,0,0,.6), inset -3px -3px 7px rgba(50, 50, 50,.5)',
        }
      }
    }
  }
  */
</style>

3D Navigation Component

A responsive 3D navigation component designed for e-commerce, featuring a grayscale color scheme and support for dark mode.

Open Preview

                <nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-5 transition-transform transform hover:scale-105">
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <h1 class="text-gray-800 dark:text-white text-xl font-bold ml-3">Brand</h1>
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Shop</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
    </div>
    <button class="md:hidden text-gray-800 dark:text-gray-200 p-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-600">
      <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 class="mt-4 md:hidden">
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Shop</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
  </div>

  <div class="mt-5 flex">
    <input type="text" placeholder="Search..." class="flex-1 p-2 rounded-lg border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 placeholder-gray-400 dark:placeholder-gray-500" />
    <button class="ml-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 p-2 rounded-lg shadow hover:shadow-lg transition duration-300">
      <img class="w-5 h-5" src="https://picsum.photos/seed/pic1/30/30" alt="Search Icon" />
    </button>
  </div>
</nav>

Retro Vintage Navigation Component

A navigation component styled in retro/vintage design with a monochromatic color scheme for a dashboard. It includes links and supports dark mode.

Open Preview

                <nav class="bg-gray-800 p-4 shadow-md">
    <div class="flex justify-between items-center">
        <div class="text-white text-lg font-bold">Retro Dashboard</div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-300 hover:text-white">Data</a>
            <a href="#" class="text-gray-300 hover:text-white">Settings</a>
            <a href="#" class="text-gray-300 hover:text-white">Profile</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-300 hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <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">Home</a>
        <a href="#" class="block text-gray-300 hover:text-white">Data</a>
        <a href="#" class="block text-gray-300 hover:text-white">Settings</a>
        <a href="#" class="block text-gray-300 hover:text-white">Profile</a>
    </div>
</nav>

<div class="p-4">
    <h2 class="text-white text-2xl mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-700 p-4 rounded-md shadow-md">
            <img src="https://picsum.photos/400/300?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md">
            <h3 class="text-white mt-2">Data Point 1</h3>
            <p class="text-gray-300">Description of data point 1.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-md shadow-md">
            <img src="https://picsum.photos/400/300?random=2" alt="Random Image" class="w-full h-32 object-cover rounded-md">
            <h3 class="text-white mt-2">Data Point 2</h3>
            <p class="text-gray-300">Description of data point 2.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-md shadow-md">
            <img src="https://picsum.photos/400/300?random=3" alt="Random Image" class="w-full h-32 object-cover rounded-md">
            <h3 class="text-white mt-2">Data Point 3</h3>
            <p class="text-gray-300">Description of data point 3.</p>
        </div>
    </div>
</div>

Social Media Navigation Component

A responsive navigation component designed for social media interfaces, featuring a Material Design aesthetic using a dark theme with Tailwind CSS.

Open Preview

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 shadow-lg">
    <div class="flex items-center justify-between">
        <a href="#" class="text-white text-lg font-semibold">Logo</a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-300 hover:text-white">Explore</a>
            <a href="#" class="text-gray-300 hover:text-white">Notifications</a>
            <a href="#" class="text-gray-300 hover:text-white">Messages</a>
            <a href="#" class="text-gray-300 hover:text-white">Profile</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-300 hover:text-white focus:outline-none" aria-label="Menu">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <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">Home</a>
        <a href="#" class="block text-gray-300 hover:text-white">Explore</a>
        <a href="#" class="block text-gray-300 hover:text-white">Notifications</a>
        <a href="#" class="block text-gray-300 hover:text-white">Messages</a>
        <a href="#" class="block text-gray-300 hover:text-white">Profile</a>
    </div>
</nav>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Friends</h2>
    <div class="flex space-x-4 mt-2">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 1</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 2</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 3</span>
        </div>
    </div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Trending Posts</h2>
    <div class="flex flex-col space-y-4 mt-2">
        <div class="flex space-x-2">
            <img src="https://picsum.photos/50/50" alt="Post Image" class="rounded-lg">
            <div>
                <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="text-gray-500 text-sm">3 hours ago</span>
            </div>
        </div>
        <div class="flex space-x-2">
            <img src="https://picsum.photos/50/50?random=1" alt="Post Image" class="rounded-lg">
            <div>
                <p class="text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <span class="text-gray-500 text-sm">5 hours ago</span>
            </div>
        </div>
    </div>
</div>\n<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Explore More</h2>
    <ul class="mt-2 space-y-1">
        <li><a href="#" class="text-gray-300 hover:text-white">#Nature</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Travel</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Food</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Technology</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Lifestyle</a></li>
    </ul>
</div>

Skeuomorphic Navigation Component

A navigation component designed in a skeuomorphic style, featuring vibrant colors and a responsive layout suitable for blog content. It includes interactive features like hover effects and is optimized for dark mode.

Open Preview

                <nav class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 flex flex-col md:flex-row md:justify-between md:items-center">
    <div class="flex items-center mb-4 md:mb-0">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <h1 class="text-lg font-bold text-violet-700 dark:text-violet-400 ml-3">My Blog</h1>
    </div>
    <ul class="flex flex-col md:flex-row space-x-0 md:space-x-6">
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Blog</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
        </li>
    </ul>
</nav>

<div class="container mx-auto p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Latest Posts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
            <img class="rounded-lg" src="https://picsum.photos/400/200" alt="Blog Post">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title One</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the first blog post. It's an engaging intro that invites readers to learn more.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
            <img class="rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Blog Post">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title Two</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the second blog post. It has some intriguing insights to offer.</p>
        </div>
    </div>
</div>

RetroNav

A simple, responsive, and dark-mode compatible navigation component with a retro/vintage design, vibrant color scheme, and minimal elements, suitable for e-commerce websites.

Open Preview

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-white text-2xl font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Products</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

Retro Vintage Navigation Component

A responsive navigation component designed with retro/vintage aesthetics inspired by 80s/90s styles, featuring a pastel color scheme. Suitable for social media interfaces, including dark mode support.

Open Preview

                <nav class="bg-pink-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <div class="flex items-center justify-between">
        <div class="text-xl font-bold text-gray-800 dark:text-white">
            RetroSocial
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
        </div>
        <button class="md:hidden bg-pink-600 text-white p-2 rounded-lg hover:bg-pink-500 transition duration-200">
            Menu
        </button>
    </div>
    <div class="mt-2 md:hidden">
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
    </div>
</nav>
<div class="bg-pink-50 dark:bg-gray-900 p-6 mt-4 rounded-lg">
    <h2 class="text-2xl text-gray-800 dark:text-white font-bold">Welcome to RetroSocial</h2>
    <p class="text-gray-600 dark:text-gray-300 mt-2">
        Connect with friends, share memories, and explore the past with our vintage-inspired social media platform.
    </p>
    <div class="mt-4 flex space-x-4">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
    </div>
</div>

Navigation Component

A responsive dark mode navigation component designed for e-commerce with a pastel color scheme and simple layout.

Open Preview

                <nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="container mx-auto flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
        </div>
    </div>
</nav>

Glassmorphism Navigation Component

A glassmorphism-styled navigation component for e-commerce sites, featuring monochromatic colors, responsive design, and dark mode support using Tailwind CSS.

Open Preview

                <nav class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-lg md:flex md:justify-between md:items-center py-4 px-6 fixed w-full z-10 dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
    <div class="flex justify-between items-center">
        <a href="#" class="text-gray-700 text-xl font-bold md:text-2xl dark:text-white">Your Logo</a>
        <div class="flex md:hidden">
            <button type="button" class="text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-gray-200 dark:hover:text-white">
                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                    <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                </svg>
            </button>
        </div>
    </div>

    <div class="hidden md:flex flex-col md:flex-row md:mx-6">
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Home</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Shop</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Categories</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Contact</a>
    </div>

    <div class="relative hidden md:block">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </span>

        <input type="text" class="w-full border rounded-md pl-10 pr-4 py-2 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white" placeholder="Search">
    </div>
</nav>