SkeuoHeaderComponent
Un composant d’en-tête réactif avec un design Skeuomorphism, la prise en charge du thème sombre et une barre de navigation.
HTML Code
<header class="bg-gray-200 dark:bg-gray-800 shadow-lg dark:shadow-none">
<div class="container mx-auto px-6 py-4 flex items-center justify-between">
<div class="text-xl font-semibold text-gray-800 dark:text-white">SkeuoHeader</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Services</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
</nav>
<button class="md:hidden text-gray-800 dark:text-white focus:outline-none">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</header>Composants associés
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 skeuomorphic
Un composant d’en-tête simple et réactif conçu pour les sites Web de commerce électronique avec un style skeuomorphe, utilisant une palette de couleurs en niveaux de gris et prenant en charge le mode sombre.
En-tête de tableau de bord complexe
Un composant d’en-tête complexe et réactif avec des éléments de conception 3D, une palette de couleurs de terre, conçu pour les tableaux de bord. Inclut la prise en charge du thème sombre à l’aide de Tailwind CSS et utilise picsum.photos et randomuser.me pour les images de démonstration/avatars.