<div class="bg-gray-800 text-sm text-white rounded-md p-4 dark:bg-white dark:text-gray-800" 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-md p-4" role="alert">
   <span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-primary text-sm text-white rounded-md p-4 " role="alert">
   <span class="font-bold">Info</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-success text-sm text-white rounded-md p-4" role="alert">
   <span class="font-bold">Success</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-error text-sm text-white rounded-md p-4" role="alert">
   <span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-warning text-sm text-white rounded-md p-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-md p-4" role="alert">
   <span class="font-bold">Light</span> alert! You should check in on some of those fields below.
</div>
            
                                                    

   
<div class="bg-gray-100 border border-gray-200 text-sm text-gray-800 rounded-md p-4 dark:bg-white/10 dark:border-white/20 dark:text-white" 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-md p-4 dark:bg-white/[.05] dark:border-white/10 dark:text-gray-400" role="alert">
   <span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-lightprimary border border-lightprimary text-sm text-primaryemphasis rounded-md p-4 dark:bg-darkprimary dark:border-darkprimary dark:text-primary" role="alert">
   <span class="font-bold">Info</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-lightsuccess border border-lightsuccess text-sm text-successemphasis rounded-md p-4 dark:bg-darksuccess dark:border-darksuccess dark:text-success" role="alert">
   <span class="font-bold">Success</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-lighterror border border-lighterror text-sm text-erroremphasis rounded-md p-4 dark:bg-darkerror dark:border-darkerror dark:text-error" role="alert">
   <span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-lightwarning border border-lightwarning text-sm text-warningemphasis rounded-md p-4 dark:bg-darkwarning dark:border-darkwarning dark:text-warning" 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-md p-4" role="alert">
   <span class="font-bold">Light</span> alert! You should check in on some of those fields below.
</div>
            
                                                    

   
<div class="bg-lightsuccess border-t-2 border-success rounded-md p-4 dark:bg-darksuccess" 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-darksuccess dark:border-teal-900 dark:bg-teal-800 dark:text-success">
            <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-lighterror border-s-4 border-error p-4 dark:bg-darkerror" 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-darkerror dark:border-red-900 dark:bg-red-800 dark:text-error">
            <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-yellow-50 border border-lightwarning text-sm text-warningemphasis rounded-md p-4 dark:bg-darkwarning dark:border-darkwarning dark:text-warning" role="alert">
   <div class="flex">
      <div class="flex-shrink-0">
         <i class="ti ti-alert-triangle text-base leading-tight font-medium"></i>
      </div>
      <div class="ms-4">
         <h3 class="text-sm font-semibold ">
            Cannot connect to the database
         </h3>
         <div class="mt-1 text-sm text-warningemphasis">
            We are unable to save any progress at this time.
         </div>
      </div>
   </div>
</div>
            
                                                    

   
<div class="bg-lighterror border border-lighterror text-sm text-erroremphasis rounded-md p-4 dark:bg-red-800/10 dark:border-darkerror dark:text-error" role="alert">
   <div class="flex">
      <div class="flex-shrink-0">
         <i class="ti ti-xbox-x text-lg leading-tight font-medium"></i>
      </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-erroremphasis dark:text-error">
            <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-lightprimary border border-lightprimary text-gray-800 rounded-md p-4 dark:bg-blue-800/10 dark:border-darkprimary dark:text-white" role="alert">
   <div class="flex items-start">
      <div class="flex-shrink-0">
         <i class="ti ti-alert-circle text-lg leading-tight font-medium"></i>
      </div>
      <div class="ms-3">
         <h3 class="font-semibold text-base leading-tight">
            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-md border border-transparent text-primary hover:text-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:text-primaryemphasis dark:hover:text-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
               Don't allow
               </button>
               <button type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-primary hover:text-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:text-primaryemphasis dark:hover:text-primary dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
               Allow
               </button>
            </div>
         </div>
      </div>
   </div>
</div>
            
                                                    

   
<div class="bg-gray-50 border border-gray-200 text-sm text-gray-600 rounded-md p-4 dark:bg-white/[.05] dark:border-white/10 dark:text-gray-400" role="alert">
   <div class="flex">
      <div class="flex-shrink-0">
         <i class="ti ti-alert-circle text-lg leading-tight font-medium"></i>
      </div>
      <div class="flex-1 md:flex md:justify-between ms-2">
         <p class="text-sm leading-tight">
            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-md  p-4 dark:bg-gray-800 dark:border-gray-700" role="alert">
   <div class="flex">
      <div class="flex-shrink-0">
         <i class="ti ti-alert-circle text-lg leading-tight font-medium text-primary dark:text-darkprimary"></i>
      </div>
      <div class="ms-3 ">
         <h3 class="text-gray-800 font-semibold text-base leading-tight 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 class="bg-white border border-gray-200 rounded-md  p-4 dark:bg-gray-800 dark:border-gray-700" role="alert">
   <div class="flex">
      <div class="flex-shrink-0">
         <i class="ti ti-alert-circle text-lg leading-tight font-medium text-primary dark:text-darkprimary"></i>
      </div>
      <div class="ms-3 ">
         <h3 class="text-gray-800 font-semibold text-base leading-tight 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>