Notification Cards

<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
  <div class="mx-auto max-w-2xl px-6">
    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">Notifications</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-cards-text-soft)]">Stay on top of what matters.</p>
    </div>

    <div class="space-y-3">
      <!-- Info notification -->
      <div class="flex items-start gap-4 rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-4">
        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-600">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/>
          </svg>
        </div>
        <div class="min-w-0 flex-1">
          <p class="text-sm font-medium text-[var(--ws-cards-text)]">System update available</p>
          <p class="mt-0.5 text-sm text-[var(--ws-cards-text-soft)]">A new version is ready to install with performance improvements.</p>
          <p class="mt-1 text-xs text-[var(--ws-cards-text-soft)]">2 min ago</p>
        </div>
        <button type="button" class="shrink-0 text-[var(--ws-cards-text-soft)] transition hover:text-[var(--ws-cards-text)]" aria-label="Dismiss">
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>

      <!-- Warning notification -->
      <div class="flex items-start gap-4 rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-4">
        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-600">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/>
          </svg>
        </div>
        <div class="min-w-0 flex-1">
          <p class="text-sm font-medium text-[var(--ws-cards-text)]">Storage almost full</p>
          <p class="mt-0.5 text-sm text-[var(--ws-cards-text-soft)]">You've used 90% of your storage quota. Consider upgrading your plan.</p>
          <p class="mt-1 text-xs text-[var(--ws-cards-text-soft)]">15 min ago</p>
        </div>
        <button type="button" class="shrink-0 text-[var(--ws-cards-text-soft)] transition hover:text-[var(--ws-cards-text)]" aria-label="Dismiss">
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>

      <!-- Success notification -->
      <div class="flex items-start gap-4 rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-4">
        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
        <div class="min-w-0 flex-1">
          <p class="text-sm font-medium text-[var(--ws-cards-text)]">Payment received</p>
          <p class="mt-0.5 text-sm text-[var(--ws-cards-text-soft)]">Your invoice #1042 has been paid successfully.</p>
          <p class="mt-1 text-xs text-[var(--ws-cards-text-soft)]">1 hour ago</p>
        </div>
        <button type="button" class="shrink-0 text-[var(--ws-cards-text-soft)] transition hover:text-[var(--ws-cards-text)]" aria-label="Dismiss">
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</section>