<div class="flex flex-col flex-wrap gap-2">
   <div class="flex flex-col flex-wrap gap-2 bg-primary-light px-4 py-3 rounded text-primary w-full" 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 gap-2 border border-primary px-4 py-3 rounded text-primary w-full" 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 gap-2 bg-success px-4 py-3 rounded text-white w-full" 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 bg-warning px-4 py-3 rounded text-white w-full" role="alert">
       +SVG_ICON("Info-Circle","w-[20px] h-[20px] stroke-white mr-2")
       <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 justify-between items-center border border-secondary text-secondarypx-4 py-3 rounded w-full 2xl:flex-col 2xl:justify-start 2xl:items-start 2xl:gap-2" role="alert">
       <div class="flex">
           +SVG_ICON("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="btn btn-secondary py-2 px-3 btn-rounded text-white">Deny</button>
            <button class="btn btn-secondary py-2 px-3 btn-rounded text-white">Accept</button>      
       </div>
   </div>
</div>

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

  <div class=".flex flex-col gap-2"> 
   <div class="flex bg-info px-4 py-3 rounded text-white w-full" 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 bg-danger px-4 py-3 rounded text-white w-full" 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="list-disc pl-4 text-white-500">
         <li class="first:mt-0 mt-2"> At least 10 characters with at least one uppercase character </li>
       </ul>
     </div>
   </div>
</div>

  <div class="flex flex-col flex-wrap gap-2">
   <div class="flex bg-primary px-4 py-3 rounded text-white w-full" role="alert">
     <div>+SVG_ICON("Danger","w-[20px] h-[20px] stroke-white mr-2")</div>
     <div>
       <span class="font-extrabold text-sm>Merged Pull Request</span>
       <ul class="list-disc pl-4 text-white-500">
         <li class="mt-3"> Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore. </li>
       </ul>
     </div>
     <div>flex.flex-wrap.gap-2<
       <i>(data-feather="clipboard")<i>
     </div>
   </div>
</div>

  <div class="flex flex-col flex-wrap gap-2">
   <div class="flex bg-warning px-4 py-3 rounded text-white w-full border-t-4 border-primary" role="alert">
     <div>+SVG_ICON("Danger","w-[20px] h-[20px] stroke-white mr-2")</div>
     <div>
       <span class="font-extrabold text-sm>Update</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.<span class="font-extrabold">~Check it out</span></p>
     </div>
     <div>flex.flex-wrap.gap-2<
       <i>(data-feather="clipboard")<i>
     </div>
   </div>
</div>