Componente di navigazione permanente
Un componente di navigazione appiccicosa in modalità scura per l'e-commerce, che utilizza una combinazione di colori complementari e un layout di base.
Codice HTML
<nav class="bg-gray-900 sticky top-0 shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0">
<img class="h-8" src="https://picsum.photos/50/50" alt="Logo">
</div>
<div class="hidden md:flex md:space-x-8 ml-10">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
<div class="flex items-center">
<button class="text-gray-300 hover:bg-gray-700 hover:text-white p-1 rounded-full">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Profile">
</button>
</div>
</div>
</div>
</nav>Componenti correlati
Componente di navigazione permanente
Un componente di navigazione appiccicoso dal design piatto minimalista con una combinazione di colori monocromatica per siti Web aziendali/aziendali. Il design include più elementi interattivi e supporta il tema scuro.
Componente di navigazione permanente
Un componente di navigazione appiccicoso progettato in uno stile scheumorfico, adatto per siti di e-commerce con un design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Nav appiccicoso skeuomorfo in scala di grigi
Una barra di navigazione appiccicosa reattiva per i blog, stilizzata con scheumorfismo utilizzando una tavolozza in scala di grigi. Dispone di supporto per la modalità oscura e un layout semplice. Costruito con Tailwind CSS (solo HTML), senza JavaScript. Il design scheumorfico mira a far apparire la barra di navigazione come un elemento fisico, leggermente rialzato.