Barra di navigazione del cruscotto Glassmorphism
Glassmorphism Barra di navigazione del cruscotto complesso monocromatico con Tailwind CSS, supporto per temi reattivi e scuri.
Codice 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>Componenti correlati
Barra di navigazione Componente 47
Una barra di navigazione reattiva con uno stile di design 3D, che incorpora profondità e coinvolgimento, supportando il tema scuro.
Barra di navigazione dei social media
Glassmorphism Scala di grigi Semplice componente della barra di navigazione dei social media
Componente della barra di navigazione
Una barra di navigazione reattiva per una dashboard, con un tema della modalità oscura con toni della terra. Include un logo, collegamenti di navigazione, una barra di ricerca e una sezione del profilo utente. Progettato per una complessità moderata con elementi interattivi.