Notification Success

<div class="ws-notification mx-auto max-w-sm rounded-xl border border-emerald-200 bg-emerald-50 p-4 shadow-lg">
  <div class="flex items-start gap-3">
    <div class="flex-shrink-0 rounded-full bg-emerald-100 p-2 text-emerald-600">
      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 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-semibold text-[var(--ws-notification-text)]">Success!</p>
      <p class="mt-1 text-sm text-[var(--ws-notification-text-soft)]">Your changes have been saved successfully and are now live.</p>
      <a href="#" class="mt-2 inline-flex text-sm font-medium text-emerald-600 transition hover:text-emerald-700 dark:hover:text-emerald-300">View details &rarr;</a>
    </div>
    <button type="button" class="flex-shrink-0 rounded-lg p-1 text-[var(--ws-notification-text-soft)] transition hover:bg-emerald-100 hover:text-[var(--ws-notification-text)] dark:hover:bg-emerald-900" aria-label="Dismiss notification">
      <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>