Modernize TailwindCSS HTML Admin Template

Rounded badges

Rounded badges - View Code

   
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-lightprimary text-primary dark:bg-blue-700/30 ">Badge</span>

Badge

Max width

Max width - View Code

   
<span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-md text-xs font-medium bg-lightprimary dark:bg-blue-700/30 text-primary">This content is a little bit longer.</span>

This content is a little bit longer.

Badge with indicator

Badge with indicator - View Code

   
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-lightprimary text-primary dark:bg-darkprimary">
<span class="w-1.5 h-1.5 inline-block rounded-full  bg-primary dark:bg-primary"></span>
Badge
</span>

Badge

Working with icons

Working with icons - View Code

   
<span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-medium bg-lightsuccess text-success rounded-full  dark:bg-darksuccess dark:text-success">
   <svg class="flex-shrink-0 w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
      <path d="m9 12 2 2 4-4"/>
   </svg>
   Connected
</span>
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-lighterror text-error rounded-full  dark:bg-darkerror dark:text-error">
   <svg class="flex-shrink-0 w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
      <path d="M12 9v4"/>
      <path d="M12 17h.01"/>
   </svg>
   Attention
</span>
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-lightprimary text-primary rounded-full  dark:bg-darkprimary dark:text-primary">
   <svg class="flex-shrink-0 w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <line x1="12" x2="12" y1="2" y2="6"/>
      <line x1="12" x2="12" y1="18" y2="22"/>
      <line x1="4.93" x2="7.76" y1="4.93" y2="7.76"/>
      <line x1="16.24" x2="19.07" y1="16.24" y2="19.07"/>
      <line x1="2" x2="6" y1="12" y2="12"/>
      <line x1="18" x2="22" y1="12" y2="12"/>
      <line x1="4.93" x2="7.76" y1="19.07" y2="16.24"/>
      <line x1="16.24" x2="19.07" y1="7.76" y2="4.93"/>
   </svg>
   Loading
</span>
<span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs bg-lightgray rounded-full text-dark dark:bg-darkborder dark:text-darklink">
   <svg class="flex-shrink-0 w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M18.36 6.64a9 9 0 1 1-12.73 0"/>
      <line x1="12" x2="12" y1="2" y2="12"/>
   </svg>
   Disabled
</span>
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-lightsuccess text-success rounded-full  dark:bg-darksuccess dark:text-success">
   <svg class="flex-shrink-0 w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/>
      <polyline points="16 7 22 7 22 13"/>
   </svg>
   14.5%
</span>
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-lighterror text-error rounded-full  dark:bg-darkerror dark:text-error">
   <svg class="flex-shrink-0 w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/>
      <polyline points="16 17 22 17 22 11"/>
   </svg>
   2%
</span>
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs bg-lightgray text-dark dark:bg-darkborder dark:text-darklink rounded-md">
   <svg class="flex-shrink-0 w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/>
      <polyline points="16 7 22 7 22 13"/>
   </svg>
   37.3%
</span>
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs bg-lightgray text-dark dark:bg-darkborder dark:text-darklink rounded-md">
   <svg class="flex-shrink-0 w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/>
      <polyline points="16 17 22 17 22 11"/>
   </svg>
   56%
</span>

Connected Attention Loading Disabled 14.5% 2% 37.3% 56%

Badge with remove button

Badge with remove button - View Code

   
<span class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full  text-xs font-medium bg-lightprimary text-primary dark:bg-darkprimary dark:text-primary">
   Badge
   <button type="button" class="flex-shrink-0 h-4 w-4 inline-flex items-center justify-center rounded-full  hover:bg-primary hover:text-white focus:outline-none">
      <span class="sr-only">Remove badge</span>
      <svg class="flex-shrink-0 h-3 w-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M18 6 6 18"/>
         <path d="m6 6 12 12"/>
      </svg>
   </button>
</span>

Badge

Badge with avatar

Badge with avatar - View Code

   
<div class="inline-flex flex-nowrap items-center bg-white border border-border rounded-full p-1.5 pe-3 dark:bg-slate-900 dark:border-darkborder">
   <img class="me-1.5 inline-block h-6 w-6 rounded-full " src="../assets/images/profile/user-1.jpg" alt="Image Description">
   <div class="whitespace-nowrap text-sm font-medium text-dark dark:text-white">
      Christina
   </div>
</div>
<div class="inline-flex flex-nowrap items-center bg-white border border-border rounded-full p-1.5 dark:bg-slate-900 dark:border-darkborder">
   <img class="me-1.5 inline-block h-6 w-6 rounded-full " src="../assets/images/profile/user-2.jpg" alt="Image Description">
   <div class="whitespace-nowrap text-sm font-medium text-dark dark:text-white">
      Mark
   </div>
   <div class="ms-2.5 inline-flex justify-center items-center h-5 w-5 rounded-full text-dark bg-border hover:bg-gray-300 focus:outline-none focus:ring-2 dark:bg-slate-700/50 dark:hover:bg-slate-700 dark:text-slate-400 cursor-pointer">
      <svg class="flex-shrink-0 w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M18 6 6 18"></path>
         <path d="m6 6 12 12"></path>
      </svg>
   </div>
</div>

Christina

Mark

With button

With button - View Code

   
<button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-border bg-white text-dark  hover:bg-gray-50 dark:bg-transparent dark:border-darkborder dark:text-white dark:hover:bg-slate-900 ">
Notifications
<span class="inline-flex items-center py-0.5 px-1.5 rounded-full  text-xs font-medium bg-error text-white">5</span>
</button>

Positioned

Positioned - View Code

   
<button type="button" class="relative inline-flex justify-center items-center h-[3.375rem] w-[3.375rem] text-sm font-semibold rounded-md border border-border bg-white text-dark  hover:bg-gray-50  dark:bg-transparent dark:border-darkborder dark:text-white dark:hover:bg-slate-900 ">
   <svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
   </svg>
   <span class="absolute top-0 end-0 inline-flex items-center py-0.5 px-1.5 rounded-full  text-xs font-medium transform -translate-y-1/2 translate-x-1/2 bg-error text-white">99+</span>
</button>

Profile

Profile - View Code

   
<button type="button" class="relative inline-flex justify-center items-center h-[3.375rem] w-[3.375rem] text-sm font-semibold rounded-md border border-border bg-white text-dark  hover:bg-gray-50  dark:bg-transparent dark:border-darkborder dark:text-white dark:hover:bg-slate-900 ">
   <svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
   </svg>
   <span class="absolute top-0 end-0 inline-flex items-center w-3.5 h-3.5 rounded-full  border-2 border-white text-xs font-medium transform -translate-y-1/2 translate-x-1/2 bg-success text-white dark:border-darkborder">
   <span class="sr-only">Badge value</span>
   </span>
</button>

Ping

Ping - View Code

   
<button type="button" class="m-1 ms-0 relative flex justify-center items-center h-[2.875rem] w-[2.875rem] text-sm font-semibold rounded-md border border-border bg-white text-dark  hover:bg-gray-50  dark:bg-transparent dark:border-darkborder dark:text-white dark:hover:bg-slate-900 ">
   <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="m5 11 4-7"/>
      <path d="m19 11-4-7"/>
      <path d="M2 11h20"/>
      <path d="m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8c.9 0 1.8-.7 2-1.6l1.7-7.4"/>
      <path d="m9 11 1 9"/>
      <path d="M4.5 15.5h15"/>
      <path d="m15 11-1 9"/>
   </svg>
   <span class="flex absolute top-0 end-0 h-3 w-3 -mt-1.5 -me-1.5">
   <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-error opacity-75 dark:bg-error"></span>
   <span class="relative inline-flex rounded-full  h-3 w-3 bg-error"></span>
   </span>
</button>
<button type="button" class="m-1 ms-0 relative py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-border bg-white text-dark  hover:bg-gray-50  dark:bg-transparent dark:border-darkborder dark:text-white dark:hover:bg-slate-900 ">
Notification
<span class="flex absolute top-0 end-0 -mt-2 -me-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-error opacity-75 dark:bg-error"></span>
<span class="relative inline-flex text-xs bg-error text-white rounded-full  py-0.5 px-1.5">
9+
</span>
</span>
</button>

Color variants

Solid color variants

Solid color variants - View Code

   
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-dark text-white dark:bg-white dark:text-dark">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-darkgray text-white">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-success text-white">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-primary text-white ">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-error text-white">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-warning text-white">Badge</span>

Badge Badge Badge Badge Badge Badge

Soft color variants

Soft color variants - View Code

   
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-lightgray text-darkgray dark:bg-darkgray dark:text-lightgray">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-lightgray text-dark dark:bg-darkborder dark:text-lightgray">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-lightsuccess text-success dark:bg-darksuccess dark:text-success">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-lightprimary text-primary dark:bg-darkprimary dark:text-primary">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-lighterror text-error dark:bg-darkerror dark:text-error">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium bg-lightwarning text-warning dark:bg-darkwarning dark:text-warning">Badge</span>

Badge Badge Badge Badge Badge Badge

Outline color variants

Outline color variants - View Code

   
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium border border-darkgray text-darkgray dark:border-lightgray dark:text-lightgray">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium border border-link text-link dark:text-darklink dark:border-darklink">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium border border-success text-success">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium border border-primary text-primary ">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium border border-error text-error">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium border border-warning text-warning">Badge</span>

Badge Badge Badge Badge Badge Badge

White color variants

White color variants - View Code

   
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-md text-xs font-medium border border-border bg-white text-dark  dark:bg-slate-900 dark:border-darkborder dark:text-white">Badge</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full  text-xs font-medium border border-border bg-white text-dark  dark:bg-slate-900 dark:border-darkborder dark:text-white">Badge</span>

Badge Badge

Badges

Rounded badges

Rounded badges - View Code

Max width

Max width - View Code

Badge with indicator

Badge with indicator - View Code

Working with icons

Working with icons - View Code

Badge with remove button

Badge with remove button - View Code

Badge with avatar

Badge with avatar - View Code

With button

With button - View Code

Positioned

Positioned - View Code

Profile

Profile - View Code

Ping

Ping - View Code

Color variants

Solid color variants

Solid color variants - View Code

Soft color variants

Soft color variants - View Code

Outline color variants

Outline color variants - View Code

White color variants

White color variants - View Code