Componente della barra laterale
Un componente reattivo della barra laterale della modalità scura progettato utilizzando Tailwind CSS, con sfondi scuri, effetti al passaggio del mouse e segnaposto per immagini e avatar.
Codice HTML
<div class="flex flex-col h-screen bg-gray-800 text-white p-4">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<h1 class="text-xl font-semibold">User Name</h1>
</div>
<nav class="flex-1">
<ul>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Home Icon" class="w-6 h-6 mr-2">Home
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Profile Icon" class="w-6 h-6 mr-2">Profile
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Settings Icon" class="w-6 h-6 mr-2">Settings
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/50/50" alt="Logout Icon" class="w-6 h-6 mr-2">Logout
</a>
</li>
</ul>
</nav>
<footer>
<p class="text-gray-400 text-sm">© 2023 Your Company</p>
</footer>
</div>Componenti correlati
Componente della barra laterale
Un componente reattivo della barra laterale progettato con l'effetto Glassmorphism e una combinazione di colori complementari, adatto per un blog o per il consumo di contenuti.
RetroImmobiliareBarra laterale
Un componente della barra laterale semplice e reattivo con un'estetica retrò/vintage, una combinazione di colori neutri caldi, progettato per le piattaforme immobiliari. Include il supporto per la modalità oscura.
Componente della barra laterale della criptovaluta
Un componente della barra laterale complesso e reattivo progettato per applicazioni di criptovaluta e blockchain, dotato di principi di Material Design con una combinazione di colori tenui e supporto completo della modalità oscura.