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 3D
Composant d’en-tête complexe et interactif conçu pour les interfaces de médias sociaux à l’aide d’un style 3D avec des couleurs en niveaux de gris. Il comprend un logo, une barre de recherche, des avatars d’utilisateurs et des boutons d’action, avec un comportement réactif et une prise en charge du mode sombre.
Composant d’en-tête de réseau social
Un composant d’en-tête complexe, réactif en mode sombre, au design minimaliste et aux couleurs complémentaires, conçu pour les interfaces de médias sociaux.
Composant d’en-tête
Un composant d’en-tête réactif avec prise en charge des micro-interactions et du thème sombre.