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 barre latérale rétro
Un composant de barre latérale réactif avec un design rétro/vintage pour présenter du travail ou des produits, utilisant une palette de couleurs en niveaux de gris et des classes CSS Tailwind, prenant en charge le mode sombre.
Composant de la barre latérale
Un composant de barre latérale complexe, réactif, de style Glassmorphism pour un tableau de bord, avec des tons de terre et la prise en charge du mode sombre.
Gradient Agriculture Barre latérale
Un composant de barre latérale simple et réactif avec un design en dégradé monochromatique, adapté à l’agriculture et aux sites Web agricoles. Inclut la prise en charge du mode sombre.