Composants Barre de navigation Glassmorphism Barre de navigation du tableau de bord

Glassmorphism Barre de navigation du tableau de bord

Barre de navigation du tableau de bord complexe monochromatique Glassmorphism avec CSS Tailwind, prise en charge du thème réactif et sombre.

Aperçu

HTML Code

<nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white font-bold text-xl">Dashboard</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">Settings</a>
      <a href="#" class="text-white hover:text-gray-200">Reports</a>
      <a href="#" class="text-white hover:text-gray-200">Users</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Composants associés

Composant de la barre de navigation

Une barre de navigation réactive avec des micro-interactions et la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir

Barre de navigation

Composant de barre de navigation réactive en mode sombre à l’aide de Tailwind CSS

Ouvrir

3D_Corporate_Blues_Food_Restaurant_Nav

Une barre de navigation complexe, inspirée de la 3D, pour les sites Web de restauration, avec un blues d’entreprise et une réactivité totale avec prise en charge du mode sombre. Intègre des éléments tels qu’un logo, des liens de navigation, une barre de recherche, un avatar d’utilisateur et un panier.

Ouvrir