Componente di navigazione
Un componente di navigazione reattivo con stile per la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<nav class="bg-gray-900 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-lg font-semibold">Brand</a>
<a href="#" class="hidden md:block">Home</a>
<a href="#" class="hidden md:block">About</a>
<a href="#" class="hidden md:block">Services</a>
<a href="#" class="hidden md:block">Contact</a>
</div>
<div class="flex items-center space-x-4">
<input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
</div>
</div>
</nav>
<main class="bg-gray-800 min-h-screen p-4">
<h1 class="text-3xl mb-4">Welcome to Our Website</h1>
<img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
<p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>
<footer class="bg-gray-900 text-white p-4">
<div class="container mx-auto text-center">
<p>© 2023 Navigation Component. All rights reserved.</p>
</div>
</footer>Componenti correlati
Componente di navigazione
Un componente di navigazione reattivo progettato per l'interfaccia utente in modalità scura, con collegamenti, menu a discesa e un logo, il tutto in stile CSS Tailwind.
Componente di navigazione skeuomorfa
Un componente di navigazione scheumorfico progettato per imitare elementi del mondo reale come un pannello di controllo fisico o un cruscotto. Presenta un design reattivo, effetti al passaggio del mouse che simulano la pressione fisica dei pulsanti e supporto per temi scuri. La navigazione include ombre sottili, sfumature e texture per creare un aspetto tattile 3D che ricorda le interfacce fisiche.
Componente di navigazione
Un componente di navigazione reattivo progettato per un portfolio, con microinterazioni e supporto per temi scuri.