<div class="flex flex-wrap gap-2"> 
   <div class="badge bg-primary badge-md text-white rounded-full">Primary</div> 
   <div class="badge bg-secondary badge-md text-white rounded-full">Secondary</div>
   <div class="badge bg-info badge-md text-white rounded-full">Info</div> 
   <div class="badge bg-success badge-md text-white rounded-full">Success</div> 
   <div class="badge bg-warning badge-md text-white rounded-full">Warning</div> 
   <div class="badge bg-danger badge-md text-white rounded-full">Danger</div>
   <div class="badge bg-light badge-md text-title rounded-full">Light</div> 
</div> 

  <div class="flex flex-wrap gap-2"> 
   <div class="badge bg-primary badge-md text-white rounded">Primary</div> 
   <div class="badge bg-secondary badge-md text-white rounded">Secondary</div>
   <div class="badge bg-info badge-md text-white rounded">Info</div> 
   <div class="badge bg-success badge-md text-white rounded">Success</div> 
   <div class="badge bg-warning badge-md text-white rounded">Warning</div> 
   <div class="badge bg-danger badge-md text-white rounded">Danger</div>
   <div class="badge bg-light badge-md text-title rounded">Light</div> 
</div> 

  <div class="flex flex-wrap gap-2"> 
   <div class="badge border border-primary text-primary rounded">Primary</div> 
   <div class="badge border border-secondary text-secondary rounded">Secondary</div>
   <div class="badge border border-info text-info rounded">Info</div> 
   <div class="badge border border-success text-success rounded">Success</div> 
   <div class="badge border border-warning text-warning rounded">Warning</div> 
   <div class="badge border border-danger text-danger rounded">Danger</div>
   <div class="badge border border-light text-title rounded">Light</div> 
</div>

  <div class="flex flex-wrap gap-2"> 
   <div class="flex items-center flex-wrap gap-2 badge bg-primary text-white rounded-full badge-md">; 
     <div class="w-2 h-2 bg-current rounded-full"></div>
     <span class="leading-none"> Primary </span>  
   </div>
   <div class="flex items-center flex-wrap gap-2 badge bg-secondary text-white rounded-full badge-md"> 
     <div class="w-2 h-2 bg-current rounded-full"></div>
     <span class="leading-none"> Secondary </span>  
   </div>
   <div class="flex items-center flex-wrap gap-2 badge bg-nnfo text-white rounded-full badge-md"> 
     <div class="w-2 h-2 bg-current rounded-full"></div>
     <span class="leading-none"> Info </span>  
   </div>
   <div class="flex items-center flex-wrap gap-2 badge bg-success text-white rounded-full badge-md"> 
     <div class="w-2 h-2 bg-current rounded-full"></div>
     <span class="leading-none"> Success </span>  
   </div>
   <div class="flex items-center flex-wrap gap-2 badge bg-warning text-white rounded-full badge-md"> 
     <div class="w-2 h-2 bg-current rounded-full"></div>
     <span class="leading-none"> Warning </span>  
   </div>
   <div class="flex items-center flex-wrap gap-2 badge bg-danger text-white rounded-full badge-md"> 
     <div class="w-2 h-2 bg-current rounded-full"></div>
     <span class="leading-none"> Danger </span>  
   </div>
   <div class="flex items-center flex-wrap gap-2 badge bg-light text-title rounded-full badge-md"> 
     <div class="w-2 h-2 bg-current rounded-full"></div>
     <span class="leading-none"> Light </span>  
   </div> 
</div> 

  <div class="flex flex-wrap gap-2"> 
   <div class="badge bg-primary badge-lg text-white rounded">Badge-lg</div> 
   <div class="badge bg-primary badge-md text-white rounded">Badge-ms</div>
   <div class="badge bg-primary badge-sm text-white rounded">Badge-sm</div> 
   <div class="badge bg-primary badge-xs text-white rounded">Badge-xs</div> 
</div>                      

  <div class="flex items-center flex-wrap gap-2"> 
   <div class="badge badge-md flex flex-wrap items-center gap-2 bg-warning text-white rounded"> 
      +SVG_ICON("Danger","w-[18px] h-[18px] stroke-white")
      <span class="text-sm">Warning</span> 
   </div>
   <div class="badge badge-md flex flex-wrap items-center gap-2 bg-danger text-white rounded"> 
      <span class="text-sm">Remove</span>
      +SVG_ICON("Close-Square","w-[18px] h-[18px] stroke-white")
   </div>
</div>

  <div class="flex items-center flex-wrap gap-2"> 
   <button class=" btn btn-info text-white flex flex-wrap items-center gap-2">Notification</button> 
     <span class="badge badge-xs bg-white text-title rounded">+99</span>
   <button class="btn btn-secondary text-white flex flex-wrap items-center gap-2">Info</button> 
     <span class="badge badge-xs bg-white text-title rounded">+50</span> 
</div>

 <div class="flex flex-wrap gap-1"> 
   <p class="text-sm flex items-center gap-2">  Here, the latest news
      <span class="badge badge-xs bg-primary rounded-full">News</span> 
   </p>
   <p class="text-sm flex items-center gap-2">  click on, for new update
      <span class="badge badge-sm bg-primary rounded-full">Update</span> 
   </p>
</div>