Composants
Barre de navigation
Transitions de dégradés/couleurs Barre de navigation du tableau de bord en niveaux de gris
Transitions de dégradés/couleurs Barre de navigation du tableau de bord en niveaux de gris
Barre de navigation complexe et réactive pour un tableau de bord, avec des transitions de dégradé dans un jeu de couleurs en niveaux de gris. Comprend plusieurs éléments interactifs et une prise en charge complète du mode sombre.
HTML Code
<nav class="bg-white shadow-lg transition-colors duration-300 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<a href="#" class="text-2xl font-bold bg-gradient-to-r from-gray-700 to-black text-transparent bg-clip-text dark:from-gray-300 dark:to-gray-100 dark:bg-opacity-75 transition-all duration-300">Dashboard</a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Overview</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Analytics</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Reports</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Settings</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button type="button" class="relative p-1 rounded-full text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:text-gray-300 dark:hover:text-white dark:focus:ring-offset-gray-800 dark:focus:ring-gray-400 transition-colors duration-200">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.8-3.003V12m0 8.25v-1.5m0-1.5V12m0 0a2.25 2.25 0 00-2.25 2.25V18a2.25 2.25 0 002.25 2.25h.75m0-4.5h-.75m-.75 0h-.75m-3.93-1.071c.42-.872 1.05-1.56 1.79-2.07c.74-.51 1.57-.79 2.44-.79h.75m0 0v-2.25m0 2.25h.75m0 0c.974 0 1.905-.275 2.722-.764m0 0A6.5 6.5 0 0012 2.25 6.5 6.5 0 006 8.25c0 1.62-.516 3.12-1.39 4.34m0 0L4.5 14.25m15 0a.75.75 0 00.75-.75L21 12.75l-.75-1.5a.75.75 0 00-.75-.75H3.75a.75.75 0 00-.75.75L3 12.75l.75 1.5a.75.75 0 00.75.75h15z" />
</svg>
</button>
<div class="relative ml-3 group">
<button type="button" class="relative flex max-w-xs items-center rounded-full bg-white dark:bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 dark:focus:ring-gray-400 transition-colors duration-200" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</button>
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-gray-800 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 scale-95 group-hover:scale-100" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
<!-- Dark Mode Toggle (Conceptual - requires JS for functionality) -->
<button type="button" class="ml-4 p-1 rounded-full text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:text-gray-300 dark:hover:text-white dark:focus:ring-offset-gray-800 dark:focus:ring-gray-400 transition-colors duration-200" aria-label="Toggle dark mode">
<svg class="h-6 w-6 dark:hidden" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-1.033 0-2.049-.154-3-.443m-4.321 4.75A9.704 9.704 0 0012 21.75c1.033 0 2.049-.154 3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M2.25 12A9.704 9.704 0 015.25 11.25c1.033 0 2.049.154 3 .443m4.321-4.75a9.704 9.704 0 013-.443m4.321-4.75a9.704 9.704 0 013-.443" />
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21.75c1.033 0 2.049-.154 3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M2.25 12A9.704 9.704 0 015.25 11.25c1.033 0 2.049.154 3 .443m4.321-4.75a9.704 9.704 0 013-.443m4.321-4.75a9.704 9.704 0 013-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M21 12.75a9.704 9.704 0 01-3 .443m-4.321 4.75a9.704 9.704 0 01-3-.443" />
<circle cx="12" cy="12" r="8" stroke="currentColor" stroke-fill="none" />
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 7.5l9 9M7.5 16.5l9-9" />
</svg>
<svg class="h-6 w-6 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-1.033 0-2.049-.154-3-.443m-4.321 4.75A9.704 9.704 0 0012 21.75c1.033 0 2.049-.154 3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M2.25 12A9.704 9.704 0 015.25 11.25c1.033 0 2.049.154 3 .443m4.321-4.75a9.704 9.704 0 013-.443m4.321-4.75a9.704 9.704 0 013-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M21 12.75a9.704 9.704 0 01-3 .443m-4.321 4.75a9.704 9.704 0 01-3-.443" />
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v18M3 12h18A9.704 9.704 0 0112 2.25c-1.033 0-2.049.154-3 .443M21.75 3.75v16.5A.75.75 0 0121 21.75H3a.75.75 0 01-.75-.75V3.75a.75.75 0 01.75-.75h18z" />
</svg>
</button>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-400 transition-colors duration-200" aria-controls="mobile-menu" aria-expanded="false">
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden hidden" id="mobile-menu">
<div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Overview</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Analytics</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Reports</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Settings</a>
</div>
<div class="border-t border-gray-200 pb-3 pt-4 dark:border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-gray-800 dark:text-gray-200">John Doe</div>
<div class="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
<button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-white dark:focus:ring-offset-gray-700 dark:focus:ring-gray-400 transition-colors duration-200">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.8-3.003V12m0 8.25v-1.5m0-1.5V12m0 0a2.25 2.25 0 00-2.25 2.25V18a2.25 2.25 0 002.25 2.25h.75m0-4.5h-.75m-.75 0h-.75m-3.93-1.071c.42-.872 1.05-1.56 1.79-2.07c.74-.51 1.57-.79 2.44-.79h.75m0 0v-2.25m0 2.25h.75m0 0c.974 0 1.905-.275 2.722-.764m0 0A6.5 6.5 0 0012 2.25 6.5 6.5 0 006 8.25c0 1.62-.516 3.12-1.39 4.34m0 0L4.5 14.25m15 0a.75.75 0 00.75-.75L21 12.75l-.75-1.5a.75.75 0 00-.75-.75H3.75a.75.75 0 00-.75.75L3 12.75l.75 1.5a.75.75 0 00.75.75h15z" />
</svg>
</button>
</div>
<div class="mt-3 space-y-1 px-2">
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white transition-colors duration-200">Your Profile</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white transition-colors duration-200">Settings</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white transition-colors duration-200">Sign out</a>
</div>
</div>
</div>
</nav>Composants associés
Barre de navigation des médias sociaux
Glassmorphism Grayscale Composant simple de la barre de navigation des médias sociaux
Barre de navigation skeuomorphe
Composant de la barre de navigation du portfolio conçu avec des styles skeuomorphes et une palette de couleurs pastel, y compris la prise en charge du mode sombre. Il comporte des éléments interactifs tels que des liens et un menu déroulant.
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.