<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-primaryLight text-primary" role="alert">
       <p><span class="font-extrabold">Harry up,</span> Sale is live now !!</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">Harry up,</span> Sale is live now !!</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">Harry up,</span> Sale is live now !!</p>
   </div>
</div> 

   <div class="flex flex-col flex-wrap gap-2">
   <div class="flex items-center w-full gap-1 px-4 py-3 text-white rounded bg-warning" role="alert">
       +iconly('', 'Info-Circle', 'text-[24px]', ['1','2'], 'path_formatter')
       <p><span class="font-extrabold leading-none ">Harry up,</span> Sale is live now !!</p>
   </div>
</div> 

   <div class="flex flex-col flex-wrap gap-2">
   <div class="flex items-center justify-between w-full py-3 border rounded border-secondary text-secondarypx-4 2xl:flex-col 2xl:justify-start 2xl:items-start 2xl:gap-2" role="alert">
       <div class="flex flex-wrap items-center gap-1">
           +SVG_ICON("leading-none","Check-Square","w-[20px] h-[20px] 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" role="alert">
     <p> Space running out </p>
     <div>
       <button class="flex px-3 py-1 text-white btn btn-primary btn-rounded">
           +iconly('leading-none mr-2', 'Notification', 'text-[24px]', ['1','2'], 'path_formatter')
          <p> REMIND ME LATER </p>
       </button>
     </div>
   </div>
</div>

   <div class=".flex flex-col gap-2"> 
   <div class="flex w-full gap-1 px-4 py-3 text-white rounded bg-info" role="alert">
     <div>+SVG_ICON("Download","w-[20px] h-[20px] 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 gap-1 px-4 py-3 text-white rounded bg-danger" role="alert">
     <div>+SVG_ICON("Danger","w-[20px] h-[20px] stroke-white mr-2")</div>
     <div>
       <span class="font-extrabold text-sm>Update</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>