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
Skeuomorphic Social Media Nav Bar
Barre de navigation skeuomorphe des médias sociaux avec schéma de couleurs triadique et complexité modérée.
Barre de navigation du portefeuille
Une barre de navigation réactive avec prise en charge du thème sombre, conçue pour un site Web de portfolio utilisant les principes de conception matérielle et la palette de couleurs des tons de terre. Il comprend un logo de marque, des liens de navigation et un bouton d’appel à l’action. Le design est modérément complexe et s’adapte aux différentes tailles d’écran.
Barre de navigation du blog
Barre de navigation réactive avec prise en charge du mode sombre pour les sites Web de blog/contenu. Dispose d’un design minimaliste / plat avec une palette de couleurs pastel.