Composant de la barre latérale
Un composant de barre latérale réactif et minimaliste pour le commerce électronique, avec prise en charge du mode sombre. Il présente une mise en page simple avec des catégories de produits et une icône de panier.
HTML Code
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-white dark:bg-gray-800 shadow-md p-4">
<div class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Shop</div>
<nav>
<ul class="space-y-4">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Categories</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">New Arrivals</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Best Sellers</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Sale</a></li>
</ul>
</nav>
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
<a href="#" class="flex items-center text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
Shopping Cart
</a>
</div>
</div>
<!-- Main content area (for context) -->
<div class="flex-1 p-8">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Welcome to our Shop</h1>
<p class="text-gray-700 dark:text-gray-300">Select a category from the sidebar to start shopping.</p>
</div>
</div>Composants associés
Composant de la barre latérale
Un composant de barre latérale réactif en mode sombre conçu à l’aide de Tailwind CSS, avec des arrière-plans sombres, des effets de survol et des espaces réservés pour les images et les avatars.
Barre latérale Skeuomorphism
Un composant de barre latérale réactif avec un design Skeuomorphism et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de la barre latérale
Un composant de barre latérale réactif conçu pour les applications de commerce électronique avec des éléments de conception matérielle et une palette de couleurs pastel, avec prise en charge du mode sombre.