AlertDialog

<!-- AlertDialog -->
<div class="flex w-full max-w-lg flex-col gap-2 rounded-xl border bg-surface p-6 shadow-lg">
  <!-- AlertDialog Content -->
  <div class="flex flex-col space-y-2 text-center sm:text-left">
    <!-- AlertDialog Title -->
    <h2 class="text-lg font-semibold">Confirm Account Deletion</h2>
    <!-- AlertDialog Description -->
    <p class="text-sm text-muted-text">
      Deleting your account is irreversible. All your account information, including data and settings, will be
      permanently erased. Are you absolutely sure?
    </p>
  </div>
 
  <!-- AlertDialog Footer -->
  <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
    <button
      class="inline-flex items-center justify-center gap-1 transition-colors duration-150 active:brightness-90 text-sm hover:bg-accent hover:text-accent-text rounded-md h-10 px-3">
      Cancel
    </button>
    <button
      class="inline-flex items-center justify-center gap-1 transition-colors duration-150 active:brightness-90 text-sm bg-primary text-primary-text hover:bg-primary/90 rounded-md h-10 px-3">
      Continue
    </button>
  </div>
</div>

<!-- AlertDialog -->
<div class="flex w-full max-w-lg flex-col gap-2 rounded-xl border bg-surface p-6 shadow-lg">
  <!-- AlertDialog Content -->
  <div class="flex flex-col space-y-2 text-center sm:text-left">
    <!-- AlertDialog Title -->
    <h2 class="text-lg font-semibold">Confirm Account Deletion</h2>
  </div>
</div>

<!-- AlertDialog -->
<div class="flex w-full max-w-lg flex-col gap-2 rounded-xl border bg-surface p-6 shadow-lg">
  <!-- AlertDialog Content -->
  <div class="flex flex-col space-y-2 text-center sm:text-left">
    <!-- AlertDialog Description -->
    <p class="text-sm text-muted-text">
      Deleting your account is irreversible. All your account information, including data and settings, will be
      permanently erased. Are you absolutely sure?
    </p>
  </div>
</div>

<!-- AlertDialog -->
<div class="flex w-full max-w-lg flex-col gap-2 rounded-xl border bg-surface p-6 shadow-lg">
  <!-- AlertDialog Footer -->
  <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
    <button
      class="inline-flex items-center justify-center gap-1 transition-colors duration-150 active:brightness-90 text-sm hover:bg-accent hover:text-accent-text rounded-md h-10 px-3">
      Cancel
    </button>
    <button
      class="inline-flex items-center justify-center gap-1 transition-colors duration-150 active:brightness-90 text-sm bg-primary text-primary-text hover:bg-primary/90 rounded-md h-10 px-3">
      Continue
    </button>
  </div>
</div>

<!-- AlertDialog -->
<div class="flex w-full max-w-lg flex-col gap-2 rounded-xl border bg-surface p-6 shadow-lg"></div>
 
<!-- AlertDialog Content -->
<div class="flex flex-col space-y-2 text-center sm:text-left"></div>
 
<!-- AlertDialog Title -->
<h2 class="text-lg font-semibold">AlertDialog Title</h2>
 
<!-- AlertDialog Description -->
<p class="text-sm text-muted-text">AlertDialog Description</p>
 
<!-- AlertDialog Footer -->
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"></div>