RetroSidebarNavigazione
Un componente di navigazione della barra laterale pastello retrò / vintage reattivo e semplice per siti Web aziendali / aziendali, con supporto per la modalità scura.
Codice HTML
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-pink-200 dark:bg-purple-800 shadow-md p-4 flex flex-col justify-between">
<div>
<div class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">ByteCorp</div>
<nav>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg">
Dashboard
</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
Analytics
</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
Reports
</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
Settings
</a>
</nav>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</div>
</div>
</div>
<!-- Content Area (for demonstration purposes) -->
<div class="flex-1 p-8">
<h1 class="text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">Welcome to ByteCorp Dashboard</h1>
<p class="text-gray-700 dark:text-gray-300 text-lg">This is a simple content area. The sidebar is on the left.</p>
</div>
</div>Componenti correlati
Navigazione nella barra laterale di Glassmorphism
Un componente di navigazione reattivo della barra laterale in stile Glassmorphism per i portafogli, con supporto della modalità scura e combinazione di colori analoga. Presenta effetti di vetro smerigliato e più elementi interattivi utilizzando solo HTML e Tailwind CSS.
Componente di navigazione della barra laterale
Un componente di navigazione della barra laterale semplice e reattivo con effetti di passaggio del mouse incentrati sulla microinterazione, progettato per siti Web governativi/di servizio pubblico. Dispone di una combinazione di colori analoga e del supporto per la modalità scura.
RetroSidebarNavigazione
Un componente di navigazione della barra laterale in stile retrò/vintage con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.