Componente della barra laterale
Un componente della barra laterale reattivo per un portfolio, caratterizzato da uno stile di progettazione 3D con un tema scuro, adatto per mostrare lavori o prodotti, con alcuni elementi interattivi e una combinazione di colori analoga.
Codice HTML
<aside class="bg-gray-800 dark:bg-gray-900 w-64 h-screen shadow-lg transform transition-transform duration-300 relative hover:translate-x-1 hover:shadow-2xl">
<div class="flex items-center justify-center h-16 border-b border-gray-700 dark:border-gray-600">
<h1 class="text-white text-lg font-bold">My Portfolio</h1>
</div>
<nav class="flex flex-col p-4">
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Home</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>About</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Projects</span>
</a>
<a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Contact</span>
</a>
</nav>
<footer class="absolute bottom-0 left-0 w-full border-t border-gray-700 dark:border-gray-600 p-4">
<p class="text-gray-500 text-sm text-center">© 2023 My Portfolio</p>
</footer>
</aside>Componenti correlati
Componente della barra laterale 27
Un componente della barra laterale in stile retrò/vintage con effetti reattivi e supporto per temi scuri.
Componente della barra laterale
Un componente della barra laterale semplice e reattivo con un design brutalista, una combinazione di colori monocromatica e il supporto della modalità scura.
Componente della barra laterale del neumorfismo
Un componente della barra laterale reattivo con design a neumorfismo, combinazione di colori dei toni della terra e complessità semplice, adatto per blog o consumo di contenuti. Include il supporto per la modalità oscura.