Navigazione nella barra laterale
Componente di navigazione reattivo della barra laterale con combinazione di colori analogici e microinterazioni, incluso il supporto del tema scuro.
Codice HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-800">
<!-- Sidebar -->
<div class="w-64 bg-teal-500 dark:bg-teal-700 text-white flex flex-col">
<div class="p-4 text-center text-2xl font-bold">Dashboard</div>
<nav class="mt-6">
<a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Home</a>
<a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Analytics</a>
<a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Reports</a>
<a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Settings</a>
</nav>
</div>
<!-- Content area -->
<div class="flex-1 p-10 text-gray-800 dark:text-gray-200">
<h1 class="text-3xl font-bold mb-6">Welcome to the Dashboard</h1>
<p>This is the main content area.</p>
</div>
</div>Componenti correlati
RetroPastelSocialSidebar
Un componente di navigazione della barra laterale semplice e reattivo con design retrò/vintage anni '80/'90, colori pastello e supporto per la modalità scura, progettato per le interfacce dei social media che utilizzano Tailwind CSS.
Componente di navigazione della barra laterale - Memphis disattivato
Un componente di navigazione della barra laterale complesso e reattivo ispirato al design di Memphis con una combinazione di colori tenui, adatto per la documentazione e i siti wiki. Include il supporto per la modalità oscura ed elementi interattivi.
Componente di navigazione della barra laterale - Agricoltura/Allevamento
Un componente di navigazione della barra laterale complesso e minimalista progettato per siti Web di agricoltura/allevamento. Presenta colori gioiello, reattività completa, supporto per la modalità oscura e molteplici elementi interattivi adatti a dashboard e sistemi di gestione in contesti agricoli.