RetroBarre latéraleNavigation
Un composant de navigation réactif et simple pour les sites Web d’entreprise, avec prise en charge du mode sombre.
HTML Code
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-pink-200 dark:bg-purple-800 shadow-md p-4 flex flex-col justify-between">
<div>
<div class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">ByteCorp</div>
<nav>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg">
Dashboard
</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
Analytics
</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
Reports
</a>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
Settings
</a>
</nav>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</div>
</div>
</div>
<!-- Content Area (for demonstration purposes) -->
<div class="flex-1 p-8">
<h1 class="text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">Welcome to ByteCorp Dashboard</h1>
<p class="text-gray-700 dark:text-gray-300 text-lg">This is a simple content area. The sidebar is on the left.</p>
</div>
</div>Composants associés
Navigation dans la barre latérale du commerce électronique
Un composant de navigation de barre latérale simple et réactif pour les sites Web de commerce électronique, doté d’un schéma de couleurs triadique, de micro-interactions au survol et de la prise en charge du mode sombre, conçu avec Tailwind CSS.
RetroBarre latéraleNavigation
Un composant de navigation dans la barre latérale de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de navigation dans la barre latérale
Un composant de navigation de barre latérale réactif stylisé de manière skeuomorphique avec prise en charge du thème sombre à l’aide de Tailwind CSS.