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.
HTML Code
<header class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-300 dark:border-gray-700 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">ShopName</h1>
</div>
<nav class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Products</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">About Us</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Contact</a>
</nav>
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full shadow-md">
<span class="absolute top-0 right-0 bg-red-500 rounded-full h-2 w-2 border-2 border-white dark:border-gray-800"></span>
</div>
</div>
</header>Composants associés
Composant d’en-tête
Un composant d’en-tête réactif avec des micro-interactions avec de petites animations attrayantes et la prise en charge du thème sombre à l’aide de Tailwind CSS.
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.
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.