Componentes Barra de navegación Glassmorphism Barra de navegación del panel

Glassmorphism Barra de navegación del panel

Barra de navegación del tablero del tablero complejo monocromático de Glassmorphism con Tailwind CSS, responsivo y soporte de temas oscuros.

Vista previa

Código HTML

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

Componentes relacionados

Barra de navegación Skeuomorphic

Un componente de barra de navegación responsivo diseñado en un estilo skeuomórfico con soporte de temas oscuros mediante Tailwind CSS.

Abrir

Componente de la barra de navegación

Un componente de barra de navegación responsivo simple diseñado para un tablero, con un esquema de color monocromático y microinteracciones. Incluye un soporte de modo oscuro con efectos de desplazamiento para animaciones atractivas.

Abrir

Barra de navegación en modo oscuro

Componente de barra de navegación con efectos responsivos y soporte para temas oscuros.

Abrir