Solid Alert

<!--
  A solid, filled alert - the loud variant for a confirmation you want seen. The
  contrast trap here is the fill itself: white on green-500/600 lands ~2-3:1 and
  fails AA, so the solids are -700/-800 (white on green-700 4.9:1, amber-800
  6.8:1). The check shape carries the "success" meaning without the colour, and
  the dismiss button is a real <button> whose label says what it closes.
-->
<div class="flex items-start gap-3 rounded-xl bg-green-700 px-4 py-3.5 text-white" role="status">
  <svg class="mt-px h-5 w-5 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
    <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.6 7.7 9.3a1 1 0 0 0-1.4 1.4l2 2a1 1 0 0 0 1.4 0l4-4Z" />
  </svg>
  <div class="min-w-0 flex-1">
    <p class="text-sm font-semibold">Payment received</p>
    <p class="mt-0.5 text-sm leading-normal text-white/90">Your invoice is settled - a receipt is on its way to your inbox.</p>
  </div>
  <button
    type="button"
    aria-label="Dismiss: Payment received"
    class="-mr-1 -mt-0.5 flex h-6 w-6 flex-none items-center justify-center rounded-md text-white/90 transition hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 motion-reduce:transition-none"
  >
    <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M6.3 6.3a1 1 0 0 1 1.4 0L10 8.6l2.3-2.3a1 1 0 1 1 1.4 1.4L11.4 10l2.3 2.3a1 1 0 0 1-1.4 1.4L10 11.4l-2.3 2.3a1 1 0 0 1-1.4-1.4L8.6 10 6.3 7.7a1 1 0 0 1 0-1.4Z" />
    </svg>
  </button>
</div>