Composant d’en-tête météo rétro 3D
Un composant d’en-tête complexe à thème rétro pour une application météo/climat, avec des éléments de conception 3D, une palette de couleurs sourdes et une réactivité totale avec prise en charge du mode sombre. Il affiche les informations météorologiques actuelles, l’emplacement, la date et la navigation.
HTML Code
<header class="bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 shadow-xl relative overflow-hidden">
<!-- Retro textured background overlay -->
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] opacity-10 dark:opacity-5"></div>
<!-- Pseudo-3D Depth Effect (subtle gradient/shadows) -->
<div class="absolute inset-0 rounded-b-lg" style="box-shadow: inset 0 -10px 20px rgba(0,0,0,0.1), inset 0 10px 20px rgba(255,255,255,0.2), 0 5px 15px rgba(0,0,0,0.2) inset;"></div>
<div class="relative z-10 max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between space-y-6 lg:space-y-0 lg:space-x-8">
<!-- Left Section: Logo & Brand Name -->
<div class="flex items-center space-x-3 transform -skew-x-3 rotate-1 lg:skew-x-0 lg:rotate-0">
<svg class="w-10 h-10 text-rose-600 dark:text-amber-400 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 21.5c-3.866 0-7-3.134-7-7 0-4.018 7-14.5 7-14.5s7 10.482 7 14.5c0 3.866-3.134 7-7 7zM12 4.5l-5.4 9.1C6.2 14.3 6 14.7 6 15c0 3.313 2.687 6 6 6s6-2.687 6-6c0-.3-.2-.7-.6-1.4L12 4.5zM12 18a3 3 0 100-6 3 3 0 000 6z"/>
</svg>
<h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight text-purple-700 dark:text-indigo-300 font-serif drop-shadow-md">AetherCast</h1>
</div>
<!-- Middle Section: Main Weather Info (Current Temperature, Location, Date) -->
<div class="flex-grow text-center lg:text-left space-y-2 lg:space-y-0 lg:space-x-8 flex flex-col lg:flex-row items-center justify-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/id/1066/60/60" alt="Weather Icon" class="w-16 h-16 sm:w-20 sm:h-20 object-cover rounded-full shadow-lg transform rotate-6 hover:rotate-0 transition-transform duration-300" />
<div>
<p class="text-5xl sm:text-6xl font-bold text-indigo-700 dark:text-teal-400 drop-shadow-lg">24°C</p>
<p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 tracking-wide mt-1">Partly Cloudy</p>
</div>
</div>
<div class="border-t lg:border-l border-b lg:border-b-0 border-gray-400 dark:border-gray-600 my-4 lg:w-px h-full hidden lg:block"></div>
<div class="text-center">
<p class="text-2xl sm:text-3xl font-semibold text-rose-600 dark:text-amber-400 drop-shadow-sm">London, UK</p>
<p class="text-md sm:text-lg text-gray-600 dark:text-gray-400">Saturday, October 26, 2024</p>
</div>
</div>
<!-- Right Section: Interactive Elements (Search, Settings, User Profile) -->
<div class="flex items-center space-x-4 sm:space-x-6">
<button class="p-3 rounded-full bg-pink-400 dark:bg-purple-700 text-white shadow-xl hover:scale-105 active:scale-95 transition-transform duration-200 transform -translate-y-1 hover:translate-y-0">
<svg class="w-6 h-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
<span class="sr-only">Search</span>
</button>
<button class="p-3 rounded-full bg-teal-400 dark:bg-sky-700 text-white shadow-xl hover:scale-105 active:scale-95 transition-transform duration-200 transform translate-x-1 hover:translate-x-0">
<svg class="w-6 h-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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.33.833 2.35 2.35a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.942 1.543-.833 3.33-2.35 2.35a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.942-3.33-.833-2.35-2.35a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.942-1.543.833-3.33 2.35-2.35a1.724 1.724 0 002.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
<span class="sr-only">Settings</span>
</button>
<div class="w-12 h-12 rounded-full overflow-hidden border-4 border-purple-500 dark:border-indigo-400 shadow-xl transform skew-y-2 hover:skew-y-0 transition-transform duration-300">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-full h-full object-cover" />
</div>
</div>
<!-- Bottom Navigation (Hidden on small screens, shown as full width on larger) -->
<nav class="absolute bottom-0 left-0 right-0 py-2 sm:py-3 bg-gradient-to-t from-gray-300 to-transparent dark:from-gray-950 dark:to-transparent lg:relative lg:bg-none lg:p-0 lg:mt-0 mt-6 md:mt-8">
<ul class="flex flex-wrap justify-center space-x-4 sm:space-x-8 px-4">
<li><a href="#" class="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-rose-600 dark:hover:text-amber-400 transition transform hover:-translate-y-1 block py-2 px-3 rounded-md bg-white/20 dark:bg-black/20 shadow-md backdrop-blur-sm lg:bg-transparent lg:shadow-none lg:hover:translate-y-0">Today</a></li>
<li><a href="#" class="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-rose-600 dark:hover:text-amber-400 transition transform hover:-translate-y-1 block py-2 px-3 rounded-md bg-white/20 dark:bg-black/20 shadow-md backdrop-blur-sm lg:bg-transparent lg:shadow-none lg:hover:translate-y-0">Hourly</a></li>
<li><a href="#" class="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-rose-600 dark:hover:text-amber-400 transition transform hover:-translate-y-1 block py-2 px-3 rounded-md bg-white/20 dark:bg-black/20 shadow-md backdrop-blur-sm lg:bg-transparent lg:shadow-none lg:hover:translate-y-0">5 Day</a></li>
<li><a href="#" class="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-rose-600 dark:hover:text-amber-400 transition transform hover:-translate-y-1 block py-2 px-3 rounded-md bg-white/20 dark:bg-black/20 shadow-md backdrop-blur-sm lg:bg-transparent lg:shadow-none lg:hover:translate-y-0">Radar</a></li>
<li><a href="#" class="text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300 hover:text-rose-600 dark:hover:text-amber-400 transition transform hover:-translate-y-1 block py-2 px-3 rounded-md bg-white/20 dark:bg-black/20 shadow-md backdrop-blur-sm lg:bg-transparent lg:shadow-none lg:hover:translate-y-0">Climate</a></li>
</ul>
</nav>
</div>
</header>Composants associés
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.
Skeuomorphism Triadic Simple Portfolio Header Component
Skeuomorphism Triadic Simple Portfolio Header Component
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.