Weather_Climate_Retro_Dark_Dashboard

<div class="min-h-screen bg-gray-900 text-gray-400 font-sans p-4 sm:p-6 md:p-8 dark:bg-gray-900">

  <div class="max-w-6xl mx-auto space-y-6">

    <!-- Header/Title -->
    <div class="flex flex-col sm:flex-row items-center justify-between pb-4 border-b border-gray-700">
      <h1 class="text-3xl sm:text-4xl font-extrabold text-amber-300 tracking-wider mb-2 sm:mb-0">Climate Outlook</h1>
      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 text-gray-500" 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="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-7.79l.707-.707M6.707 17.325l-.707.707M16.949 7.05l.707-.707M7.05 16.949l-.707.707M12 10a2 2 0 100 4 2 2 0 000-4z"></path></svg>
        <span class="text-sm text-gray-500">Last Updated: 12:30 PM, Oct 26</span>
      </div>
    </div>

    <!-- Main Weather Card -->
    <div class="bg-opacity-20 bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between">
        <div class="flex items-center mb-4 md:mb-0">
          <img src="https://picsum.photos/id/1041/100/100" alt="Cloudy Sky" class="w-24 h-24 rounded-full mr-4 object-cover border-2 border-amber-400" />
          <div>
            <p class="text-6xl font-bold text-amber-200">22°C</p>
            <p class="text-xl text-gray-300">Partly Cloudy</p>
          </div>
        </div>
        <div class="text-right">
          <p class="text-3xl font-semibold text-gray-200 mb-1">New York</p>
          <p class="text-lg text-gray-400">Humidity: 65%</p>
          <p class="text-lg text-gray-400">Wind: 15 km/h E</p>
        </div>
      </div>
    </div>

    <!-- Forecast Cards (Grid) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

      <!-- Day 1 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p- Dudley. The text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Tomorrow</p>
        <img src="https://picsum.photos/id/972/80/80" alt="Rainy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">18°C</p>
        <p class="text-md text-gray-400">Rainy</p>
      </div>

      <!-- Day 2 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Sun</p>
        <img src="https://picsum.photos/id/1020/80/80" alt="Sunny Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">25°C</p>
        <p class="text-md text-gray-400">Sunny</p>
      </div>

      <!-- Day 3 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Mon</p>
        <img src="https://picsum.photos/id/1024/80/80" alt="Cloudy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">20°C</p>
        <p class="text-md text-gray-400">Cloudy</p>
      </div>

      <!-- Day 4 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Tue</p>
        <img src="https://picsum.photos/id/1077/80/80" alt="Windy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">19°C</p>
        <p class="text-md text-gray-400">Windy</p>
      </div>

    </div>

    <!-- Climate Trend Chart Placeholder -->
    <div class="bg-opacity-20 bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
      <h2 class="text-xl font-semibold text-gray-200 mb-4">Temperature Trend (Last 7 Days)</h2>
      <div class="w-full h-48 bg-gray-700 rounded-md flex items-center justify-center">
        <p class="text-gray-500 text-lg">Graph Placeholder</p>
      </div>
    </div>

    <!-- Additional Data Points / Footer -->
    <div class="flex flex-col sm:flex-row items-center justify-between text-gray-500 pt-4 border-t border-gray-700">
      <p class="text-sm mb-2 sm:mb-0">© 2023 Retro Climate Inc.</p>
      <div class="flex space-x-4 text-sm">
        <a href="#" class="hover:text-gray-400">Privacy</a>
        <a href="#" class="hover:text-gray-400">Terms</a>
        <a href="#" class="hover:text-gray-400">Contact</a>
      </div>
    </div>

  </div>
</div>