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
Composant de navigation dans la barre latérale - Jeux
Un composant de navigation minimaliste et réactif avec du noir, du blanc et une couleur d’accentuation vive, conçu pour les sites Web de jeux. Inclut la prise en charge du mode sombre.
Gaming_Sidebar_Navigation_Component
Un composant de navigation latéral réactif pour les sites Web de jeux, doté d’un design monospace/inspiré des développeurs avec un contraste élevé, une prise en charge du mode sombre et des éléments interactifs. Idéal pour les interfaces de jeu et les portails communautaires.
Brutalisme Barre latérale Navigation
Un composant de navigation de barre latérale de style brutaliste avec des tons de terre, une complexité modérée, une réactivité et une prise en charge du mode sombre, conçu pour les sites de blogs/contenus utilisant Tailwind CSS.