Composant d’en-tête
Un composant d’en-tête réactif doté d’un design Glassmorphism avec des éléments translucides givrés ressemblant à du verre et une prise en charge du thème sombre.
HTML Code
<header class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-60 shadow-lg p-4 flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
<h1 class="text-xl font-bold text-gray-900 dark:text-white">My Website</h1>
</div>
<nav class="space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">About</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Services</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact</a>
</nav>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
</div>
</header>Composants associés
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.
Composant d’en-tête vintage rétro
Un composant d’en-tête réactif avec un style rétro/vintage adapté à un tableau de bord avec prise en charge du thème sombre.
Composant d’en-tête
composant d’en-tête tailwind avec conception 3D, palette de couleurs pastel, complexité complexe, objectif du tableau de bord, conception réactive et prise en charge du thème sombre