Badge

Icon Badge

<div class="badge-holder">
    <i class="fa fa-user grid place-content-center w-12 h-12 bg-light p-2 br-full text-dark"></i>
    <span class="badge">12</span>
</div>
<div class="badge-holder">
    <i class="fa fa-message grid place-content-center w-12 h-12 bg-secondary p-2 br-full text-light"></i>
    <span class="badge badge-error">102</span>
</div>

Avatar Badge

15

<div class="avatar-badge-container">
<img src="https://bestprofilepictures.com/wp-content/uploads/2021/04/Cool-Profile-Picture.jpg" 
alt="Cool Profile" class="avatar avatar-xl" />
<span class="avatar-badge ">15</span>
</div>

Avatar Status Badge

<div class="avatar-badge-container">
    <img src="https://bestprofilepictures.com/wp-content/uploads/2021/04/Cool-Profile-Picture.jpg" 
    alt="Cool Profile"
        class="avatar avatar-xl" />
    <span class="avatar-badge badge-error"></span>
</div>
<div class="avatar-badge-container">
    <img src="https://bestprofilepictures.com/wp-content/uploads/2021/04/Cool-Profile-Picture.jpg" 
    alt="Cool Profile"
        class="avatar avatar-xl" />
    <span class="avatar-badge badge-warning"></span>
</div>
<div class="avatar-badge-container">
    <img src="https://bestprofilepictures.com/wp-content/uploads/2021/04/Cool-Profile-Picture.jpg" 
    alt="Cool Profile"
        class="avatar avatar-xl" />
    <span class="avatar-badge badge-info"></span>
</div>
<div class="avatar-badge-container">
    <img src="https://bestprofilepictures.com/wp-content/uploads/2021/04/Cool-Profile-Picture.jpg" 
    alt="Cool Profile"
        class="avatar avatar-xl" />
    <span class="avatar-badge badge-success"></span>
</div>