Badges on Avatar

           
<div class="badge-container mr-3">
    <div class="avatar avatar-lg">
      <img
        class="img-responsive img-round"
        src="/css/images/img_avatar.png"
        alt="avatar"
      />
    </div>
    <span class="status-badge status-online"></span>
  </div>
  <div class="badge-container mr-3">
    <div class="avatar avatar-md">
      <img
        class="img-responsive img-round"
        src="/css/images/img_avatar.png"
        alt="avatar"
      />
    </div>
    <span class="status-badge status-offline"></span>
  </div>
  <div class="badge-container mr-3">
    <div class="avatar avatar-sm">
      <img
        class="img-responsive img-round"
        src="/css/images/img_avatar.png"
        alt="avatar"
      />
    </div>
    <span class="status-badge status-away"></span>
  </div>
  <div class="badge-container mr-3">
    <div class="avatar avatar-xs">
      <img
        class="img-responsive img-round"
        alt="avatar"
        src="/css/images/img_avatar.png"
      />
    </div>
    <span class="status-badge status-online"></span>
  </div>

           
        

Badges on Icon

2

           
  <a>
    <span class="btn-icon badge-container"
      ><i class="text-slate-700 fas fa-shopping-cart"></i>
      <span class="icon-badge-sm text-xs status-badge bg-indigo-400 text-white">2</span>
    </span>
  </a>
           
        

           
<h2 class="badge-container mb-2">
    Example of Text with Badge
    <span class="text-badge bg-teal-500 text-white">New</span>
  </h2>
  <h3 class="badge-container mb-2">
    Example of Text with Badge
    <span class="text-badge bg-sky-500 text-white">New</span>
  </h3>
  <h4 class="badge-container mb-2">
    Example of Text with Badge
    <span
      class="text-badge bg-rose-500 rounded-pill-badge text-white"
      >New</span
    >
  </h4>
  <h5 class="badge-container">
    Example of Text with Badge
    <span class="text-badge bg-cyan-500 text-white">New</span>
  </h5>