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 della barra laterale complesso, reattivo, in stile Glassmorphism per un cruscotto, con toni della terra e supporto per la modalità scura.
Componente della barra laterale
Un componente della barra laterale reattivo progettato in uno stile retrò/vintage con colori vivaci per un layout del cruscotto. Include il supporto per la modalità oscura.
Barra laterale per l'e-commerce
Barra laterale Glassmorphism reattiva per l'e-commerce con modalità scura