Rechercher des composants

Catégories

Composants Navigation

Navigation

Composants qui aident les utilisateurs à naviguer sur le site Web et à trouver du contenu

Composant de navigation Material Design

Un composant de navigation Material Design simple et réactif pour les interfaces de médias sociaux à l’aide d’un schéma de couleurs en niveaux de gris. Dispose d’une mise en page épurée avec logo, liens de navigation, barre de recherche et avatar de l’utilisateur. Inclut la prise en charge du mode sombre à l’aide du préfixe dark : de Tailwind.

Ouvrir Aperçu

                <!-- 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>

Composant de navigation par neumorphisme

Composant de navigation Neumorphism optimisé pour les sites Web de portfolio. Il présente une mise en page complexe avec plusieurs éléments interactifs, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. La palette de couleurs est analogue.

Ouvrir Aperçu

                <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>

Navigation brutaliste dans le commerce électronique

Un composant de navigation de style brutaliste pour le commerce électronique, doté d’une palette de couleurs en niveaux de gris, d’une mise en page complexe, d’une réactivité et d’une prise en charge du mode sombre, construit avec Tailwind CSS.

Ouvrir Aperçu

                <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>

Composant de navigation

Un composant de navigation réactif conçu pour un portfolio, avec des micro-interactions et la prise en charge des thèmes sombres.

Ouvrir Aperçu

                <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>

Navigation dans le tableau de bord (Material Design)

Composant de navigation de tableau de bord de conception matérielle avec schéma de couleurs triadique et prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de navigation réactive

Composant de navigation réactif avec micro-interactions, palette de couleurs en niveaux de gris et complexité simple.

Ouvrir Aperçu

                <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>

Composant de navigation rétro du tableau de bord

Composant de navigation rétro/vintage pour tableau de bord avec des couleurs vives, une complexité modérée, une réactivité et une prise en charge du thème sombre.

Ouvrir Aperçu

                <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>

Composant de navigation

Un composant de navigation réactif conçu pour la consommation de blog/contenu avec un style de conception 3D, une palette de couleurs complémentaire et une complexité modérée intégrant certaines fonctionnalités interactives.

Ouvrir Aperçu

                <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>

Composant de navigation

Un composant de navigation simple conçu pour un blog avec des micro-interactions et une palette de couleurs pastel. Il dispose d’une mise en page réactive et d’un support de thème sombre.

Ouvrir Aperçu

                <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>

Composante de navigation brutaliste du commerce électronique

Un composant de navigation e-commerce complexe et brutaliste utilisant Tailwind CSS, avec un schéma de couleurs triadique (jaune, cyan, fuchsia) avec un contraste élevé (noir/blanc), un méga-menu CSS uniquement, une révélation de recherche CSS uniquement, un menu mobile réactif CSS uniquement et la prise en charge du mode sombre. HTML uniquement, pas de JavaScript.

Ouvrir Aperçu

                <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>