<div>
 <div class="bg-gray-800 text-sm text-white rounded-lg p-4 dark:bg-white dark:text-gray-800 mb-4" role="alert">
  <span class="font-bold">Dark</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-gray-500 text-sm text-white rounded-lg p-4 mb-4" role="alert">
  <span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-blue-600 text-sm text-white rounded-lg p-4 dark:bg-blue-500 mb-4" role="alert">
  <span class="font-bold">Info</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-teal-500 text-sm text-white rounded-lg p-4 mb-4" role="alert">
  <span class="font-bold">Success</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-red-500 text-sm text-white rounded-lg p-4 mb-4" role="alert">
  <span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-yellow-500 text-sm text-white rounded-lg p-4 mb-4" role="alert">
  <span class="font-bold">Warning</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-white text-sm text-gray-600 rounded-lg p-4 mb-4" role="alert">
  <span class="font-bold">Light</span> alert! You should check in on some of those fields below.
</div>
</div>
        
        

        
<div class="bg-gray-100 border border-gray-200 text-sm text-gray-800 rounded-lg p-4 dark:bg-white/10 dark:border-white/20 dark:text-white mb-4" role="alert">
    <span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-gray-50 border border-gray-200 text-sm text-gray-600 rounded-lg p-4 dark:bg-white/[.05] dark:border-white/10 dark:text-gray-400 mb-4" role="alert">
    <span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-blue-100 border border-blue-200 text-sm text-blue-800 rounded-lg p-4 dark:bg-blue-800/10 dark:border-blue-900 dark:text-blue-500 mb-4" role="alert">
    <span class="font-bold">Info</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-teal-100 border border-teal-200 text-sm text-teal-800 rounded-lg p-4 dark:bg-teal-800/10 dark:border-teal-900 dark:text-teal-500 mb-4" role="alert">
    <span class="font-bold">Success</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-red-100 border border-red-200 text-sm text-red-800 rounded-lg p-4 dark:bg-red-800/10 dark:border-red-900 dark:text-red-500 mb-4" role="alert">
    <span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-yellow-100 border border-yellow-200 text-sm text-yellow-800 rounded-lg p-4 dark:bg-yellow-800/10 dark:border-yellow-900 dark:text-yellow-500 mb-4" role="alert">
    <span class="font-bold">Warning</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-white/10 border border-white/10 text-sm text-white rounded-lg p-4 mb-4" role="alert">
    <span class="font-bold">Light</span> alert! You should check in on some of those fields below.
  </div>
        
        

        
<div class="bg-teal-50 border-t-2 border-teal-500 rounded-lg p-4 dark:bg-teal-800/30 mb-4" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <!-- Icon -->
      <span class="inline-flex justify-center items-center size-8 rounded-full border-4 border-teal-100 bg-teal-200 text-teal-800 dark:border-teal-900 dark:bg-teal-800 dark:text-teal-400">
        <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
      </span>
      <!-- End Icon -->
    </div>
    <div class="ms-3">
      <h3 class="text-gray-800 font-semibold dark:text-white">
        Successfully updated.
      </h3>
      <p class="text-sm text-gray-700 dark:text-gray-400">
        You have successfully updated your email preferences.
      </p>
    </div>
  </div>
</div>

<div class="bg-red-50 border-s-4 border-red-500 p-4 dark:bg-red-800/30 mb-4" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <!-- Icon -->
      <span class="inline-flex justify-center items-center size-8 rounded-full border-4 border-red-100 bg-red-200 text-red-800 dark:border-red-900 dark:bg-red-800 dark:text-red-400">
        <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </span>
      <!-- End Icon -->
    </div>
    <div class="ms-3">
      <h3 class="text-gray-800 font-semibold dark:text-white">
        Error!
      </h3>
      <p class="text-sm text-gray-700 dark:text-gray-400">
        Your purchase has been declined.
      </p>
    </div>
  </div>
</div>
        
        

        
<div class="bg-red-50 border border-red-200 text-sm text-red-800 rounded-lg p-4 dark:bg-red-800/10 dark:border-red-900 dark:text-red-500" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="flex-shrink-0 size-4 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
    </div>
    <div class="ms-4">
      <h3 class="text-sm font-semibold">
        A problem has been occurred while submitting your data.
      </h3>
      <div class="mt-2 text-sm text-red-700 dark:text-red-400">
        <ul class="list-disc space-y-1 ps-5">
          <li>
            This username is already in use
          </li>
          <li>
            Email field can't be empty
          </li>
          <li>
            Please enter a valid phone number
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
        
        

        
<div class="bg-white border border-gray-200 text-sm text-gray-600 rounded-lg p-4 dark:bg-white dark:border-white/10 dark:text-gray-400" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="flex-shrink-0 size-4 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    </div>
    <div class="flex-1 md:flex md:justify-between ms-2">
      <p class="text-sm">
        A new software update is available. See what's new in version 3.0.7
      </p>
      <p class="text-sm mt-3 md:mt-0 md:ms-6">
        <a class="text-gray-800 hover:text-gray-500 font-medium whitespace-nowrap dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">Details</a>
      </p>
    </div>
  </div>
</div>
        
        

        
<div class="bg-white border border-gray-200 rounded-lg shadow-lg p-4 dark:bg-gray-800 dark:border-gray-700" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="flex-shrink-0 size-4 text-blue-600 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    </div>
    <div class="ms-3">
      <h3 class="text-gray-800 font-semibold dark:text-white">
        New version published
      </h3>
      <p class="mt-2 text-sm text-gray-700 dark:text-gray-400">
        Chris Lynch published a new version of this page. Refresh to see the changes.
      </p>
    </div>
  </div>
</div>
        
        

        
<div id="dismiss-alert" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-teal-50 border border-teal-200 text-sm text-teal-800 rounded-lg p-4 dark:bg-teal-800/10 dark:border-teal-900 dark:text-teal-500" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="flex-shrink-0 size-4 text-blue-600 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
    </div>
    <div class="ms-2">
      <div class="text-sm font-medium">
        File has been successfully uploaded.
      </div>
    </div>
    <div class="ps-3 ms-auto">
      <div class="-mx-1.5 -my-1.5">
        <button type="button" class="inline-flex bg-teal-50 rounded-lg p-1.5 text-teal-500 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-teal-50 focus:ring-teal-600 dark:bg-transparent dark:hover:bg-teal-800/50 dark:text-teal-600" data-hs-remove-element="#dismiss-alert">
          <span class="sr-only">Dismiss</span>
          <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        </button>
      </div>
    </div>
  </div>
</div>
        
        

        
<div class="bg-blue-100 border border-blue-200 text-gray-800 rounded-lg p-4 dark:bg-blue-800/10 dark:border-blue-900 dark:text-white" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="flex-shrink-0 size-4 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 16v-4"></path>
        <path d="M12 8h.01"></path>
      </svg>
    </div>
    <div class="ms-3">
      <h3 class="font-semibold">
        YouTube would like you to send notifications
      </h3>
      <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        Notifications may include alerts, sounds and icon badges. These can be configured in Settings.
      </div>
      <div class="mt-4">
        <div class="flex space-x-3">
          <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400">
            Don't allow
          </button>
          <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400">
            Allow
          </button>
        </div>
      </div>
    </div>
  </div>
</div>