Barre latérale du commerce électronique
Barre latérale Glassmorphism réactive pour le commerce électronique avec mode sombre
HTML Code
<div class="flex h-screen bg-gray-200 dark:bg-gray-900">
<!-- Glassmorphism Sidebar -->
<div class="w-64 px-2 py-6 bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-30 dark:backdrop-filter dark:backdrop-blur-lg">
<div class="flex items-center justify-center">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">E-Store</h2>
</div>
<nav class="mt-10">
<a href="#" class="flex items-center px-4 py-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
<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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
Home
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
<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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
Products
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
<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>
Cart
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
<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="M10.325 4.317c1.03-.523 2.165-.943 3.356-.943 1.224 0 2.424.42 3.451.923L15.172 21H12v-3a3 3 0 00-3-3H5s.5-2 2-3c2.104-1.992 3.413-3.97 4.613-5.648l-.765-.765z"></path></svg>
Wishlist
</a>
</nav>
</div>
<!-- Main Content Area (can be added here) -->
<div class="flex-1 p-10">
<!-- Your main content goes here -->
</div>
</div>Composants associés
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.
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.
Barre latérale sur le neumorphisme
Un composant de barre latérale de style Neumorphisme avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.