Composant d’en-tête
Composant d’en-tête avec micro-interactions, schéma de couleurs complémentaires, complexité complexe, à des fins de tableau de bord, à l’aide de Tailwind CSS.
HTML Code
<header class="bg-gray-100 dark:bg-gray-800 shadow-md">
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
<div class="flex items-center space-x-4">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">Dashboard</h1>
<nav class="hidden md:flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-105">Overview</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400 transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-yellow-500 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
</nav>
</div>
<div class="flex items-center space-x-4">
<button class="text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:rotate-6 focus:outline-none">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a3 3 0 11-6 0m6 0v2a3 3 0 11-6 0v-2"></path></svg>
</button>
<div class="relative">
<button class="flex items-center space-x-2 text-gray-600 dark:text-gray-300 hover:text-purple-500 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="hidden md:block font-medium">John Doe</span>
</button>
<!-- Dropdown would be implemented with JS, not included here -->
</div>
</div>
</div>
</header>Composants associés
Composant d’en-tête
Un composant d’en-tête réactif pour une plate-forme musicale/audio, doté d’une esthétique de conception monospace/développeur avec des tons de terre et la prise en charge du mode sombre.
Skeuomorphism Triadic Simple Portfolio Header Component
Skeuomorphism Triadic Simple Portfolio Header Component
Composant d’en-tête de commerce électronique
Un composant d’en-tête d’e-commerce réactif construit à l’aide de Tailwind CSS avec les principes de Material Design. Dispose d’une palette de couleurs monochromatiques (nuances de bleu), d’une fonctionnalité de recherche, d’un menu de navigation, d’un panier d’achat et d’un profil utilisateur. L’en-tête comprend des effets de profondeur tels que des ombres et prend en charge le mode sombre. Le composant est entièrement réactif avec un menu de hamburgers mobile.