Weather Card

<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
  <div class="mx-auto max-w-sm px-6">
    <div class="overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)]">
      <!-- Current weather -->
      <div class="p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-[var(--ws-cards-text-soft)]">San Francisco</p>
            <p class="mt-1 text-4xl font-bold text-[var(--ws-cards-text)]">24°C</p>
          </div>
          <svg class="h-14 w-14 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
          </svg>
        </div>
        <p class="mt-1 text-sm text-[var(--ws-cards-text-soft)]">Sunny</p>
      </div>

      <!-- 5-day forecast -->
      <div class="flex justify-between border-t border-[var(--ws-cards-border)] px-6 py-4">
        <div class="text-center">
          <p class="text-xs font-medium text-[var(--ws-cards-text-soft)]">Mon</p>
          <svg class="mx-auto mt-1 h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/></svg>
          <p class="mt-1 text-xs font-semibold text-[var(--ws-cards-text)]">26°</p>
        </div>
        <div class="text-center">
          <p class="text-xs font-medium text-[var(--ws-cards-text-soft)]">Tue</p>
          <svg class="mx-auto mt-1 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M4.5 13.5a6 6 0 0111.598-2.192A4.5 4.5 0 1118 19.5H6a4.5 4.5 0 01-1.5-6z"/></svg>
          <p class="mt-1 text-xs font-semibold text-[var(--ws-cards-text)]">22°</p>
        </div>
        <div class="text-center">
          <p class="text-xs font-medium text-[var(--ws-cards-text-soft)]">Wed</p>
          <svg class="mx-auto mt-1 h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.25c.414 0 .75.336.75.75v1.5a.75.75 0 01-1.5 0V3c0-.414.336-.75.75-.75zM9 12a3 3 0 116 0 3 3 0 01-6 0z"/><path d="M4.5 13.5a6 6 0 0111.598-2.192A4.5 4.5 0 1118 19.5H6a4.5 4.5 0 01-1.5-6z"/></svg>
          <p class="mt-1 text-xs font-semibold text-[var(--ws-cards-text)]">20°</p>
        </div>
        <div class="text-center">
          <p class="text-xs font-medium text-[var(--ws-cards-text-soft)]">Thu</p>
          <svg class="mx-auto mt-1 h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/></svg>
          <p class="mt-1 text-xs font-semibold text-[var(--ws-cards-text)]">25°</p>
        </div>
        <div class="text-center">
          <p class="text-xs font-medium text-[var(--ws-cards-text-soft)]">Fri</p>
          <svg class="mx-auto mt-1 h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/></svg>
          <p class="mt-1 text-xs font-semibold text-[var(--ws-cards-text)]">27°</p>
        </div>
      </div>
    </div>
  </div>
</section>