Daily Briefing Card with Weather and Greeting

<div class="w-full max-w-7xl mt-6 mr-auto mb-24 ml-auto pt-6 pr-6 pb-6 pl-6">
  <div class="grid lg:grid-cols-2 gap-8 items-stretch">
    <!-- Greeting Section -->
    <div class="flex flex-col bg-white border-black/5 border rounded-3xl pt-8 pr-8 pb-8 pl-8">
      <div class="flex items-center gap-4 mb-6">
        <div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-emerald-500/10 text-emerald-600">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><circle cx="12" cy="12" r="5" class=""></circle><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" class=""></path></svg>
        </div>
        <div>
          <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 class="space-y-3 flex-1">
        <p class="text-lg text-black/80 font-geist">Welcome back to your daily news briefing. Here's what's happening today:</p>
        <div class="flex items-center gap-2 text-sm text-black/60">
          <span class="inline-flex items-center gap-1 font-geist">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
            3 breaking stories
          </span>
          <span>•</span>
          <span class="font-geist">12 min read time</span>
        </div>
      </div>
    </div>

    <!-- Weather Widget -->
    <div class="bg-black rounded-3xl text-white p-8 flex flex-col">
      <div class="flex items-start justify-between mb-6">
        <div>
          <h3 class="text-xl font-medium font-geist">San Francisco</h3>
          <p class="text-white/80 text-sm font-geist">Current conditions</p>
        </div>
        <div class="text-right">
          <div class="text-4xl font-semibold font-geist">72°</div>
          <p class="text-white/80 text-sm font-geist">Partly cloudy</p>
        </div>
      </div>
      
      <!-- Weather Icon -->
      <div class="flex items-center justify-center mb-6">
        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-200"><circle cx="12" cy="12" r="4" class=""></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" class=""></path></svg>
      </div>

      <!-- Weather Details -->
      <div class="grid grid-cols-3 gap-4 text-center">
        <div>
          <p class="text-white/60 text-xs font-geist uppercase tracking-wider">High</p>
          <p class="text-lg font-medium font-geist">78°</p>
        </div>
        <div>
          <p class="text-white/60 text-xs font-geist uppercase tracking-wider">Low</p>
          <p class="text-lg font-medium font-geist">65°</p>
        </div>
        <div class="">
          <p class="text-white/60 text-xs font-geist uppercase tracking-wider">Chance</p>
          <p class="text-lg font-medium font-geist">15%</p>
        </div>
      </div>

      <!-- 5-Day Forecast -->
      <div class="mt-6 pt-6 border-t border-white/20">
        <div class="flex justify-between items-center">
          <div class="text-center">
            <p class="text-xs text-white/60 font-geist">Wed</p>
            <p class="text-sm font-medium font-geist">74°</p>
          </div>
          <div class="text-center">
            <p class="text-xs text-white/60 font-geist">Thu</p>
            <p class="text-sm font-medium font-geist">76°</p>
          </div>
          <div class="text-center">
            <p class="text-xs text-white/60 font-geist">Fri</p>
            <p class="text-sm font-medium font-geist">73°</p>
          </div>
          <div class="text-center">
            <p class="text-xs text-white/60 font-geist">Sat</p>
            <p class="text-sm font-medium font-geist">71°</p>
          </div>
          <div class="text-center">
            <p class="text-xs text-white/60 font-geist">Sun</p>
            <p class="text-sm font-medium font-geist">75°</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>