Componente della barra laterale
Un componente della barra laterale reattivo progettato per applicazioni di e-commerce con elementi di Material Design e una combinazione di colori pastello, con supporto per la modalità scura.
Codice HTML
<aside class="bg-white dark:bg-gray-800 h-full w-64 p-5 shadow-lg transition-transform duration-300 transform lg:translate-x-0 lg:fixed lg:left-0 lg:top-0 lg:h-full">
<div class="flex items-center mb-5">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<h2 class="ml-3 text-gray-800 dark:text-white font-semibold">User Name</h2>
</div>
<nav>
<ul>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Home</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Shop</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Orders</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Wishlist</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Profile</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Settings</a>
</li>
<li>
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Logout</a>
</li>
</ul>
</nav>
<div class="mt-5">
<h3 class="text-gray-600 dark:text-gray-400 font-semibold">Featured Products</h3>
<div class="mt-3">
<img class="w-full h-24 object-cover rounded-lg shadow-md" src="https://picsum.photos/200/100?random=1" alt="Product 1">
<img class="w-full h-24 object-cover rounded-lg shadow-md mt-2" src="https://picsum.photos/200/100?random=2" alt="Product 2">
</div>
</div>
</aside>Componenti correlati
Componente della barra laterale
Un componente minimalista della barra laterale con design reattivo e supporto per temi scuri, che utilizza Tailwind CSS.
Barra laterale del blog semplice e vibrante
Un componente della barra laterale semplice e reattivo per i contenuti del blog, progettato con colori vivaci e una sensazione simile a quella dei materiali utilizzando Tailwind CSS. Include collegamenti di navigazione e una sezione del profilo utente. Supporta la modalità oscura utilizzando il prefisso dark: di Tailwind. Risolto su schermi più grandi, nascosto su schermi più piccoli.
Componente della barra laterale
Un componente della barra laterale reattivo e minimalista per l'e-commerce, con supporto per la modalità scura. Presenta un layout semplice con categorie di prodotti e un'icona del carrello della spesa.