Composant de la barre de navigation
Composant simple de barre de navigation réactive conçu pour un tableau de bord, doté d’un schéma de couleurs monochromatiques et de micro-interactions. Il comprend un support en mode sombre avec des effets de survol pour des animations engageantes.
HTML Code
<nav class="bg-gray-800 dark:bg-gray-900 shadow-lg">
<div class="max-w-7xl mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0">
<h1 class="text-white text-2xl">Dashboard</h1>
</div>
<div class="hidden md:block">
<div class="flex items-center space-x-4">
<a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Home</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Profile</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Settings</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Logout</a>
</div>
</div>
<div class="flex md:hidden">
<button class="text-gray-300 hover:text-white focus:outline-none">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
</div>
</nav>
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h2 class="text-white text-xl mb-4">Welcome to your Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
<h3 class="text-white text-lg">Data Visualization</h3>
<img src="https://picsum.photos/300/200" alt="Visualization" class="mt-2 rounded" />
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
<h3 class="text-white text-lg">Control Panel</h3>
<img src="https://picsum.photos/300/201" alt="Control" class="mt-2 rounded" />
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
<h3 class="text-white text-lg">User Insights</h3>
<img src="https://picsum.photos/300/202" alt="Insights" class="mt-2 rounded" />
</div>
</div>
</div>Composants associés
Composant de la barre de navigation
Une barre de navigation réactive pour un tableau de bord, avec un thème en mode sombre avec des tons de terre. Comprend un logo, des liens de navigation, une barre de recherche et une section de profil utilisateur. Conçu pour une complexité modérée avec des éléments interactifs.
Composant de la barre de navigation
Un composant de barre de navigation réactif conçu dans le style Material Design avec une palette de couleurs triadique, adapté aux interfaces de médias sociaux et incluant la prise en charge du thème sombre.
Neon_Glow_Navbar_Music_Audio
Un composant de barre de navigation complexe et réactif pour les plates-formes musicales/audio, avec des effets de néon/lueur et une palette de couleurs neutres et chaudes. Comprend la prise en charge du mode sombre et des éléments interactifs.