Alert

<div role="alert" class="w-full rounded-lg bg-blue-50 p-4 text-sm font-medium text-blue-800 ring-1 ring-blue-100">Let&#x27;s get started! Fill out the form below to create your account.</div>
<div role="alert" class="w-full rounded-lg bg-slate-50 p-4 text-sm font-medium text-slate-800 ring-1 ring-slate-100">You&#x27;re almost there! Please review the form below.</div>
<div role="alert" class="w-full rounded-lg bg-amber-50 p-4 text-sm font-medium text-amber-800 ring-1 ring-amber-100">Are you sure you want to delete this item? This action cannot be undone.</div>
<div role="alert" class="w-full rounded-lg bg-red-50 p-4 text-sm font-medium text-red-800 ring-1 ring-red-100">Something went wrong with your submission.</div>

<div role="alert" class="flex w-full space-x-4 rounded-lg bg-red-50 p-4 text-red-800 ring-1 ring-red-100">
  <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0">
    <circle cx="12" cy="12.5" r="9">
    </circle>
    <path d="M12 7.75v5.5m-.005 3.25h.01">
    </path>
  </svg>
  <h3 class="text-sm font-medium">Something went wrong with your submission.</h3>
</div>

<div role="alert" class="flex w-full space-x-4 rounded-lg bg-red-50 p-4 text-red-800 ring-1 ring-red-100">
  <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0">
    <circle cx="12" cy="12.5" r="9">
    </circle>
    <path d="M12 7.75v5.5m-.005 3.25h.01">
    </path>
  </svg>
  <div class="space-y-1">
    <h3 class="text-sm font-medium">Something went wrong with your submission.</h3>
    <div class="text-sm text-red-700">Please check your connection and try again. If the problem persists, contact support.</div>
  </div>
</div>

<div class="flex space-x-4 rounded-lg bg-slate-50 p-4 text-slate-950 ring-1 ring-slate-200" role="alert">
  <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0">
    <circle cx="12" cy="12.5" r="9">
    </circle>
    <path d="M12 16.5v-5h-.5m0 5h1m-.505-8h.01">
    </path>
  </svg>
  <div>
    <h3 class="text-sm font-medium">You have a new invoice due. Pay now to avoid late fees.</h3>
    <div class="mt-2 text-sm text-slate-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.</div>
    <a href="#" class="mt-4 inline-flex text-sm font-medium text-slate-950 underline">Pay Now</a>
  </div>
</div>

<div role="alert" class="flex w-full items-center justify-between space-x-4 rounded-lg bg-blue-50 p-4 ring-1 ring-blue-100">
  <div class="flex items-center space-x-4">
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 text-blue-800">
      <circle cx="12" cy="12.5" r="9">
      </circle>
      <path d="M12 7.75v5.5m-.005 3.25h.01">
      </path>
    </svg>
    <h3 class="text-sm font-medium text-blue-800">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
  </div>
  <button>
    <span class="sr-only">Dismiss</span>
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 text-blue-800">
      <path d="M19 5 5 19M5 5l14 14">
      </path>
    </svg>
  </button>
</div>