Responsive Dashboard Greeting with Weather Card

<div class="w-full max-w-7xl mt-6 mr-auto ml-auto pt-6 pr-5 pb-6 pl-6">
  <div class="grid lg:grid-cols-2 gap-8 items-stretch">
    <!-- Greeting Section -->
    <div class="flex flex-col rounded-3xl pt-4 pr-4 pb-4 pl-4">
      <div class="flex gap-4 items-center">
        
        <div class="">
          <h2 class="text-3xl font-semibold text-black tracking-tight font-playfair">Good morning!</h2>
          <p class="text-sm text-black/60 font-geist">Tuesday, September 8, 2025</p>
        </div>
      </div>
      
    </div>

    <!-- Weather Widget -->
    <div class="flex flex-col text-white bg-black rounded-3xl pt-4 pr-8 pb-4 pl-8 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
      <div class="flex items-start justify-between">
        <div class="">
          <h3 class="text-3xl font-medium font-playfair">San Francisco</h3>
          <p class="text-white/80 text-sm font-geist">Current conditions</p>
        </div>
        <div class="text-right">
          <div class="text-3xl font-bold font-playfair">72°</div>
          <p class="text-white/80 text-sm font-geist">Partly cloudy</p>
        </div>
      </div>
      
      <!-- Weather Icon -->
      

      <!-- Weather Details -->
      

      <!-- 5-Day Forecast -->
      
    </div>
  </div>
</div>