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
RetroHeaderComponent
Composant d’en-tête rétro/vintage avec effets réactifs et prise en charge du thème sombre.
Composant d’en-tête de commerce électronique
Un composant d’en-tête réactif, dynamique, inspiré du Material Design pour les sites Web de commerce électronique, avec la navigation, la recherche et les actions de l’utilisateur. Prend en charge le mode sombre.
Composant d’en-tête
Composant d’en-tête simple et réactif pour un blog ou un site de contenu avec un style monochromatique et une prise en charge du mode sombre, en se concentrant sur des micro-interactions subtiles lors du survol des liens de navigation.