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

Barre de navigation en mode sombre

Composant de la barre de navigation avec effets réactifs et prise en charge du thème sombre.

Ouvrir

Barre de navigation brutaliste

Une barre de navigation réactive conçue dans un style brutaliste avec des couleurs à haute saturation, pour la consommation de blogs et de contenu, avec prise en charge du thème sombre.

Ouvrir

Barre de navigation Composant 16

Un composant de barre de navigation minimaliste au design plat avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir