Badge

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

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

<div class="flex flex-wrap gap-2"> 
   <div class="border rounded badge hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 border-primary text-primary">Primary</div> 
   <div class="border rounded badge hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 border-secondary text-secondary">Secondary</div>
   <div class="border rounded badge hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 border-info text-info">Info</div> 
   <div class="border rounded badge hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 border-success text-success">Success</div> 
   <div class="border rounded badge hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 border-warning text-warning">Warning</div> 
   <div class="border rounded badge hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 border-danger text-danger">Danger</div>
   <div class="border rounded badge hover:translate-y-[-5px] hover:transition-all hover:ease translate-y-0 border-light text-title">Light</div> 
</div>

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

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

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

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

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