Search Components

Navigation

Components that help users navigate through the website and find content

Material Design Navigation Component

A simple, responsive Material Design navigation component for social media interfaces using a grayscale color scheme. Features a clean layout with logo, navigation links, search bar, and user avatar. Includes dark mode support using Tailwind's dark: prefix.

Open Preview

                <!-- Material Design Navigation Component for Social Media -->
<nav class="w-full bg-white dark:bg-gray-900 shadow-md transition-colors duration-200">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <!-- Logo and Brand -->
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <span class="text-gray-800 dark:text-white font-medium text-xl">SocialConnect</span>
        </div>
        
        <!-- Desktop Navigation Links -->
        <div class="hidden md:block ml-10">
          <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Home</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Explore</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Messages</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Notifications</a>
          </div>
        </div>
      </div>
      
      <!-- Search Bar -->
      <div class="hidden md:block flex-1 max-w-xs mx-4">
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-gray-100 dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-sm text-gray-900 dark:text-white transition-colors duration-200" placeholder="Search">
        </div>
      </div>
      
      <!-- Right side - User profile and mobile menu button -->
      <div class="flex items-center">
        <!-- User Avatar -->
        <div class="ml-3 flex items-center">
          <div class="relative">
            <img class="h-8 w-8 rounded-full ring-2 ring-gray-200 dark:ring-gray-700" src="https://randomuser.me/api/portraits/women/72.jpg" alt="User avatar">
            <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-1 ring-white dark:ring-gray-800 bg-green-400"></span>
          </div>
        </div>
        
        <!-- Mobile menu button -->
        <button type="button" class="md:hidden ml-4 inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors duration-200">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
    
    <!-- Mobile Search Bar (visible on mobile only) -->
    <div class="md:hidden py-2">
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
          </svg>
        </div>
        <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-gray-100 dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-sm text-gray-900 dark:text-white transition-colors duration-200" placeholder="Search">
      </div>
    </div>
  </div>
  
  <!-- Mobile Navigation Menu (hidden by default) -->
  <div class="hidden md:hidden bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Explore</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Messages</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Notifications</a>
    </div>
  </div>
</nav>

Neumorphism Navigation Component

Neumorphism Navigation Component optimized for Portfolio websites. It features a complex layout with multiple interactive elements, a responsive design, and dark mode support using Tailwind CSS. The color scheme is Analogous.

Open Preview

                <nav class="p-6 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="container mx-auto flex items-center justify-between">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Your Name</span>
    </div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-400 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 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>
  <div class="mobile-menu hidden md:hidden mt-4 space-y-2">
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
  </div>
</nav>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }
    .shadow-neumorphic-text-light {
    text-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
  }
     .dark .shadow-neumorphic-text-dark {
    text-shadow: 2px 2px 5px #333333, -2px -2px 5px #555555;
  }
</style>

Brutalist E-commerce Navigation

A brutalist-style navigation component for e-commerce, featuring a grayscale color scheme, complex layout, responsiveness, and dark mode support, built with Tailwind CSS.

Open Preview

                <nav class="bg-gray-900 text-white dark:bg-black dark:text-gray-100 p-4">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="text-2xl font-bold uppercase border-2 border-white dark:border-gray-100 p-2">Store</div>
    <div class="block lg:hidden">
      <button id="menu-toggle" class="text-white dark:text-gray-100 focus:outline-none">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
    <div id="menu" class="w-full lg:flex lg:items-center lg:w-auto hidden lg:block mt-4 lg:mt-0">
      <ul class="uppercase text-sm lg:flex-grow">
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Home</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Shop</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Categories</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Contact</a></li>
      </ul>
      <div class="flex items-center mt-4 lg:mt-0">
        <input type="text" placeholder="Search" class="p-2 text-black dark:text-white bg-white dark:bg-gray-800 border-2 border-white dark:border-gray-100 mr-4">
        <a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Cart (0)</a>
      </div>
    </div>
  </div>
</nav>

<script>
  const menuToggle = document.getElementById('menu-toggle');
  const menu = document.getElementById('menu');

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

Navigation Component

A responsive navigation component designed for a portfolio, featuring microinteractions and dark theme support.

Open Preview

                <nav class="bg-gray-800 text-white dark:bg-gray-900 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Home</a>
            <a href="#portfolio" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Portfolio</a>
            <a href="#about" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">About</a>
            <a href="#contact" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Login</a>
            <a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Sign Up</a>
        </div>
    </div>
</nav>

<div class="bg-gray-100 text-black dark:bg-gray-800 dark:text-white">
    <div class="container mx-auto p-8">
        <h1 class="text-3xl font-bold mb-4">My Portfolio</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 1</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 2</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 3</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Dashboard Navigation (Material Design)

Material Design Dashboard Navigation Component with Triadic color scheme and dark mode support.

Open Preview

                <nav class="bg-white dark:bg-gray-800 shadow">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-gray-800 dark:text-white font-bold text-xl">Dashboard</div>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Home</a>
        <a href="#" class="text-gray-800 dark:text-white hover:text-teal-500 dark:hover:text-teal-400 transition duration-300">Analytics</a>
        <a href="#" class="text-gray-800 dark:text-white hover:text-red-500 dark:hover:text-red-400 transition duration-300">Settings</a>
      </div>
    </div>
  </div>
</nav>

Responsive Navigation Component

Responsive Navigation Component with Microinteractions, Grayscale color scheme, and Simple complexity.

Open Preview

                <nav class="bg-white dark:bg-gray-800 shadow">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="relative flex items-center justify-between h-16">
      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
        <!-- Mobile menu button-->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
           <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
        <div class="flex-shrink-0">
          <span class="text-xl font-bold text-gray-900 dark:text-white">Logo</span>
        </div>
        <div class="hidden sm:block sm:ml-6">
          <div class="flex space-x-4">
            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>

            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>

            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>

            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
          </div>
        </div>
      </div>
      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
        <button type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
          <span class="sr-only">View notifications</span>
          <!-- Heroicon name: outline/bell -->
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/>
          </svg>
        </button>

        <!-- Profile dropdown -->
        <div class="ml-3 relative">
          <div>
            <button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>

      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>

      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>

      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
    </div>
  </div>
</nav>

Retro Dashboard Navigation Component

Retro/Vintage Navigation Component for Dashboard with Vibrant colors, Moderate complexity, responsiveness, and dark theme support.

Open Preview

                <nav class='bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 p-4 text-white dark:from-purple-900 dark:via-pink-900 dark:to-red-900'>
  <div class='container mx-auto flex justify-between items-center'>
    <div class='text-2xl font-bold font-mono'>Dashboard</div>
    <ul class='flex space-x-4'>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Home</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Analytics</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Settings</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Profile</a></li>
    </ul>
  </div>
</nav>

Navigation Component

A responsive navigation component designed for blog/content consumption with a 3D design style, complementary color scheme, and moderate complexity incorporating some interactive features.

Open Preview

                <nav class="bg-gray-800 text-white shadow-lg p-4 dark:bg-gray-900">
    <div class="container mx-auto flex justify-between items-center">
        <div>
            <a href="#" class="text-xl font-bold hover:text-blue-400 transition duration-300">BlogLogo</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Home</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">About</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Blog</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Contact</a>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4 space-x-4">
        <input type="text" placeholder="Search..." class="bg-gray-700 text-white rounded-md px-3 py-2 w-full max-w-xs mr-2 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:focus:ring-blue-600" />
        <button class="bg-blue-500 text-white rounded-md px-3 py-2 transition duration-300 hover:bg-blue-600 dark:hover:bg-blue-700">Search</button>
    </div>
</nav>

<!-- Responsive Design -->
<div class="relative mt-10 p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-800">
            <img src="https://picsum.photos/500/300" alt="Blog Image" class="w-full h-48 object-cover rounded-md mb-4" />
            <h2 class="font-bold text-lg mb-2">Blog Post Title</h2>
            <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-800">
            <img src="https://picsum.photos/500/301" alt="Blog Image" class="w-full h-48 object-cover rounded-md mb-4" />
            <h2 class="font-bold text-lg mb-2">Blog Post Title</h2>
            <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        </div>
    </div>
</div>

<!-- Avatar Section -->
<div class="bg-gray-800 p-4 rounded-lg shadow-lg dark:bg-gray-900 mt-6">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500" />
        <div>
            <h3 class="text-lg font-bold text-white">Author Name</h3>
            <p class="text-gray-400">Author Bio or description goes here. Sharing insights and stories.</p>
        </div>
    </div>
</div>

Navigation Component

A simple navigation component designed for a blog with microinteractions and pastel color scheme. It features a responsive layout and dark theme support.

Open Preview

                <nav class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/30/30" alt="Logo" class="rounded-full">
            <span class="text-xl font-semibold text-gray-800 dark:text-white">My Blog</span>
        </div>
        <ul class="flex space-x-6">
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">About</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Blog</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Contact</a>
            </li>
        </ul>
    </div>
</nav>

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>