World Clocks

<div
  class="ws-clock-widget rounded-2xl border p-6 max-w-lg mx-auto"
  style="
    --ws-clock-widget-bg: oklch(0.98 0.005 75);
    --ws-clock-widget-text: oklch(0.2 0.02 75);
    --ws-clock-widget-text-soft: oklch(0.35 0.015 75);
    --ws-clock-widget-text-muted: oklch(0.55 0.01 75);
    --ws-clock-widget-border: oklch(0.88 0.015 75);
    --ws-clock-widget-accent: oklch(0.55 0.12 75);
    --ws-clock-widget-accent-soft: oklch(0.92 0.04 75);
    background: var(--ws-clock-widget-bg);
    color: var(--ws-clock-widget-text);
    border-color: var(--ws-clock-widget-border);
  "
>
  <h3 class="text-sm font-semibold uppercase tracking-wider mb-4" style="color: var(--ws-clock-widget-text-muted);">
    World Clocks
  </h3>

  <div class="grid grid-cols-2 gap-3">
    <!-- New York -->
    <div class="rounded-xl border p-4" style="border-color: var(--ws-clock-widget-border);">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-medium" style="color: var(--ws-clock-widget-text-muted);">New York</span>
        <span class="size-2 rounded-full bg-emerald-400" aria-label="Business hours"></span>
      </div>
      <p class="text-2xl font-light tracking-tight" style="color: var(--ws-clock-widget-text);">09:32 AM</p>
      <p class="text-xs mt-1" style="color: var(--ws-clock-widget-text-muted);">UTC−5</p>
    </div>

    <!-- London -->
    <div class="rounded-xl border p-4" style="border-color: var(--ws-clock-widget-border);">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-medium" style="color: var(--ws-clock-widget-text-muted);">London</span>
        <span class="size-2 rounded-full bg-emerald-400" aria-label="Business hours"></span>
      </div>
      <p class="text-2xl font-light tracking-tight" style="color: var(--ws-clock-widget-text);">14:32 PM</p>
      <p class="text-xs mt-1" style="color: var(--ws-clock-widget-text-muted);">UTC+0</p>
    </div>

    <!-- Tokyo -->
    <div class="rounded-xl border p-4" style="border-color: var(--ws-clock-widget-border);">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-medium" style="color: var(--ws-clock-widget-text-muted);">Tokyo</span>
        <span class="size-2 rounded-full bg-neutral-300" aria-label="Night hours"></span>
      </div>
      <p class="text-2xl font-light tracking-tight" style="color: var(--ws-clock-widget-text);">23:32</p>
      <p class="text-xs mt-1" style="color: var(--ws-clock-widget-text-muted);">UTC+9</p>
    </div>

    <!-- Sydney -->
    <div class="rounded-xl border p-4" style="border-color: var(--ws-clock-widget-border);">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-medium" style="color: var(--ws-clock-widget-text-muted);">Sydney</span>
        <span class="size-2 rounded-full bg-neutral-300" aria-label="Night hours"></span>
      </div>
      <p class="text-2xl font-light tracking-tight" style="color: var(--ws-clock-widget-text);">01:32 AM</p>
      <p class="text-xs mt-1" style="color: var(--ws-clock-widget-text-muted);">UTC+11 · +1 day</p>
    </div>
  </div>
</div>