3D 레트로 웨더 헤더 구성 요소

<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>