Badges on Avatar

                   
<div class="badge-container">
    <div class="avatar avatar-lg">
        <img class="img-responsive img-round" src="components/images/avatar-img.jpeg" alt="avatar" />
    </div>
    <span class="animate-ping status-badge status-online"></span>
</div>


<div class="badge-container">
    <div class="avatar avatar-md">
        <img class="img-responsive img-round" src="components/images/avatar-img.jpeg" alt="avatar" />
    </div>
    <span class="animate-pulse status-badge status-offline"></span>
</div>


<div class="badge-container">
    <div class="avatar avatar-sm">
        <img class="img-responsive img-round" src="components/images/avatar-img.jpeg" alt="avatar" />
    </div>
    <span class="status-badge status-away"></span>
</div>


<div class="badge-container">
    <div class="avatar avatar-xs">
        <img class="img-responsive img-round" alt="avatar" src="components/images/avatar-img.jpeg" />
    </div>
    <span class="animate-pulse 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="status-badge bg-pink-500 status-badge-number">2</span>
    </span>
</a>
                   
                

                   
<h2 class="badge-container">
    Example of Heading with Badge
    <span class="badge bg-teal-500 text-white">New</span>
</h2>

<h3 class="badge-container">
    Example of Heading with Badge
    <span class="badge bg-sky-500 text-white">New</span>
</h3>


<h4 class="badge-container">
    Example of Heading with Badge
    <span class="badge bg-rose-500 rounded-pill-badge text-white">New</span>
</h4>


<h5 class="badge-container">
    Example of Heading with Badge
    <span class="badge bg-cyan-500 text-white">New</span>
</h5>