Clock Widget

<div
  class="ws-clock-widget rounded-2xl border p-8 text-center max-w-sm 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);
  "
>
  <div class="mb-4">
    <div class="flex items-baseline justify-center gap-1.5">
      <span class="text-6xl font-light tracking-tight" style="color: var(--ws-clock-widget-text);">14:32</span>
      <span class="text-2xl font-light" style="color: var(--ws-clock-widget-text-muted);">48</span>
    </div>
  </div>

  <p class="text-base font-medium mb-1" style="color: var(--ws-clock-widget-text-soft);">
    Thursday, March 22, 2026
  </p>

  <span
    class="inline-block mt-2 rounded-full px-3 py-1 text-xs font-medium"
    style="background: var(--ws-clock-widget-accent-soft); color: var(--ws-clock-widget-accent);"
  >
    CET (UTC+1)
  </span>
</div>