Alert

<div class="flex flex-col flex-wrap gap-2">
   <div class="flex flex-col flex-wrap w-full gap-2 px-4 py-3 rounded bg-primary-light text-primary" role="alert">
       <p><span class="font-extrabold"> YouTube's,</span> most crucial ranking factors is Watch Time.</p>
   </div> 
</div> 

<div class="flex flex-col flex-wrap gap-2">
   <div class="flex flex-col flex-wrap w-full gap-2 px-4 py-3 border rounded border-primary text-primary" role="alert">
       <p><span class="font-extrabold"> Oh snap! Change a few things up </span> Notification check </p>
   </div>
</div>

<div class="flex flex-col flex-wrap gap-2">
   <div class="flex flex-col flex-wrap w-full gap-2 px-4 py-3 text-white rounded bg-success" role="alert">
       <p><span class="font-extrabold">Well done!</span>You successfully read this important message. </p>
   </div>
</div>

<div class="flex flex-col flex-wrap gap-2">
   <div class="flex items-center w-full px-4 py-3 text-white rounded bg-warning" role="alert">
       +SVG_ICON("Info-Circle","w-[1.25rem] h-[1.25rem] stroke-white mr-2")
       <p> Hidden material You ought to update a few of the fields listed below.</p>
   </div>
</div>

<div class="flex flex-col flex-wrap gap-2">
   <div class="flex items-center justify-between w-full px-4 py-3 border rounded border-secondary text-secondary lg:flex-col lg:items-start 2xl:justify-between 2xl:items-center 2xl:gap-2 2md:flex-row 2md:items-center sm:flex-col sm:items-start" role="alert">
       <div class="flex">
           +SVG_ICON("Check-Square","w-[1.25rem] h-[1.25rem] stroke-secondary mr-2")
           <p> Accept terms and conditions </p>
       </div>
       <div class="flex flex-wrap gap-2">
            <button class="px-3 py-2 text-white btn btn-secondary btn-rounded">Deny</button>
            <button class="px-3 py-2 text-white btn btn-secondary btn-rounded">Accept</button>      
       </div>
   </div>
</div> 

<div class="flex flex-col flex-wrap gap-2">
   <div class="flex items-center justify-between w-full px-4 py-3 border rounded border-primary lg:flex-col lg:justify-start lg:items-start lg:gap-2 2md:flex-row 2md:justify-between 2md:items-center sm:flex-col sm:justify-start sm:items-start" role="alert">
     <p> Space running out </p>
     <div>
       <button class="flex px-3 py-1 text-white btn btn-primary btn-rounded">
         +SVG_ICON("Notification","w-[1.25rem] h-[1.25rem] stroke-white mr-2") 
          <span> REMIND ME LATER </span>
       </button>
     </div>
   </div>
</div> 

<div class=".flex flex-col gap-2"> 
   <div class="flex w-full px-4 py-3 text-white rounded bg-info" role="alert">
     <div>+SVG_ICON("Download","w-[1.25rem] h-[1.25rem] stroke-white mr-2")</div>
     <div>
       <span class="font-extrabold text-sm>Update</span>
       <p>Ready to update<span class="font-extrabold">~Check it out</span></p>
     </div>
   </div> 
</div>

<div class="flex flex-col flex-wrap gap-2">
   <div class="flex w-full px-4 py-3 text-white rounded bg-danger" role="alert">
     <div>+SVG_ICON("Danger","w-[1.25rem] h-[1.25rem] stroke-white mr-2")</div>
     <div>
       <span class="font-extrabold text-sm>It's required for password</span>
       <ul class="pl-4 list-disc text-white-500">
         <li class="mt-2 first:mt-0"> At least 10 characters with at least one uppercase character </li>
       </ul>
     </div>
   </div>
</div>