<div class="d-flex gap-2 flex-wrap">
    <span class="badge bg-gradient-primary">Primary</span>
    <span class="badge bg-gradient-secondary">Secondary</span>
    <span class="badge bg-gradient-info">Info</span>
    <span class="badge bg-gradient-danger">Danger</span>
    <span class="badge bg-gradient-warning">
        <i class="ti ti-download me-1"></i>Warning
    </span>
    <span class="badge bg-gradient-light">Light</span>
    <span class="badge bg-gradient-dark">Dark</span>
</div>

                                    
                                  

                                     
    <div class="d-flex gap-2 flex-wrap">
    <span class="badge bg-outline-secondary">Secondary</span>
    <span class="badge bg-light-info">Info</span>
    <span class="badge text-bg-danger b-r-10">Danger</span>
    <span class="badge text-light-warning">
        <i class="ti ti-download me-1"></i>Warning
    </span>
    <span class="badge bg-light shadow">Light</span>
    <span class="badge bg-dark"><span>● </span>Dark</span>
</div>

                                    
                                  

                                     
      <div class="d-flex gap-2 flex-wrap">
    <span class="bg-gradient-primary h-40 w-40 d-flex-center b-r-50 position-relative">
        <img alt="avatar" class="img-fluid b-r-50" src="https://pinmeets.com/assets/images/avatar/07.png">
        <span class="position-absolute top-5 start-1 top-0 p-1 bg-success border border-light rounded-circle"></span>
    </span>

    <span class="bg-gradient-secondary h-40 w-40 d-flex-center b-r-50 position-relative">
        <img alt="avatar" class="img-fluid b-r-50" src="https://pinmeets.com/assets/images/avatar/05.png">
        <span class="position-absolute bottom-0 start-1 p-1 bg-primary border border-light rounded-circle"></span>
    </span>

    <span class="bg-gradient-dark h-40 w-40 d-flex-center b-r-50 position-relative">
        <img alt="avatar" class="img-fluid b-r-50" src="https://pinmeets.com/assets/images/avatar/02.png">
        <span class="position-absolute bottom-0 end-0 p-1 bg-info border border-light rounded-circle"></span>
    </span>

    <span class="bg-gradient-info h-40 w-40 d-flex-center b-r-50 position-relative">
        <img alt="avatar" class="img-fluid b-r-50" src="https://pinmeets.com/assets/images/avatar/01.png">
        <span class="position-absolute top-0 end-0 p-1 bg-dark border border-light rounded-circle"></span>
    </span>

    <span class="bg-gradient-primary h-40 w-40 d-flex-center b-r-50 position-relative">
        <i class="ti ti-bell-ringing f-s-16"></i>
        <span class="position-absolute top-5 start-1 top-0 p-1 bg-success border border-light rounded-circle"></span>
    </span>

    <span class="bg-gradient-secondary h-40 w-40 d-flex-center b-r-50 position-relative">
        <i class="ti ti-alarm f-s-20"></i>
        <span class="position-absolute bottom-0 start-1 p-1 bg-primary border border-light rounded-circle"></span>
    </span>

    <span class="bg-gradient-dark h-40 w-40 d-flex-center b-r-50 position-relative">
        <i class="ti ti-shopping-bag f-s-20"></i>
        <span class="position-absolute bottom-0 end-0 p-1 bg-info border border-light rounded-circle"></span>
    </span>

    <span class="bg-gradient-info h-40 w-40 d-flex-center b-r-50 position-relative">
        <i class="ti ti-heart f-s-18"></i>
        <span class="position-absolute top-0 end-0 p-1 bg-dark border border-light rounded-circle"></span>
    </span>
</div>

                                    
                                  

                                     
 <div class="d-flex gap-2 flex-wrap">
    <a class="position-relative bg-light-primary px-2 py-1 b-r-10" href="#">
        <i class="ti ti-shopping-cart f-s-22"></i>
        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-primary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
    </a>

    <a class="position-relative bg-light-secondary px-2 py-1 b-r-10" href="#">
        <i class="ti ti-line-dashed f-s-22"></i>
        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-secondary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
    </a>

    <a class="position-relative bg-light-success px-2 py-1 b-r-10" href="#">
        <i class="ti ti-speakerphone f-s-22"></i>
        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-success rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
    </a>

    <a class="position-relative bg-light-danger px-2 py-1 b-r-10" href="#">
        <i class="ti ti-mail f-s-22"></i>
        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
    </a>

    <a class="position-relative bg-light-dark px-2 py-1 b-r-10" href="#">
        <i class="ti ti-moon-filled f-s-22"></i>
        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-dark rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
    </a>
</div>

                                    
                                  

                                     
   <div class="d-flex gap-4 flex-wrap">
    <button class="btn btn-light-primary" type="button">
        Notifications <span class="badge bg-gradient-primary badge-notification">4</span>
    </button>

    <button class="btn btn-light-secondary position-relative" type="button">
        Disable
        <span class="position-absolute top-0 start-100 translate-middle p-2 bg-gradient-secondary border border-light rounded-circle">
            <span class="visually-hidden">Disable</span>
        </span>
    </button>

    <button class="btn btn-light-success position-relative" type="button">
        Inbox
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-gradient-success badge-notification">
            99+
            <span class="visually-hidden">unread messages</span>
        </span>
    </button>

    <button class="btn btn-light-danger position-relative" type="button">
        Unread
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-gradient-danger badge-notification">
            <i class="ti ti-bell-ringing"></i>
        </span>
    </button>

    <button class="btn btn-outline-warning position-relative" type="button">
        Inbox
        <span class="badge rounded-pill bg-gradient-warning badge-notification">
            99+
            <span class="visually-hidden">unread messages</span>
        </span>
    </button>

    <button class="btn btn-light-info position-relative f-s-14" type="button">
        <b>50%</b> Off
        <span class="position-absolute top-0 start-100 translate-middle bg-gradient-info b-r-6 badge-notification p-1 f-s-12">
            New
        </span>
    </button>

    <button class="btn btn-light-dark position-relative" type="button">
        <b> 1 </b> missed call
        <span class="position-absolute top-0 start-100 translate-middle p-2 bg-gradient-dark border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower">
            <span class="visually-hidden">Busy</span>
        </span>
    </button>
</div>

                                    
                                  

                                     
    <div class="d-flex gap-2 flex-wrap">
    <span class="chip bg-gradient-primary">Primary</span>
    <span class="chip bg-gradient-secondary">Secondary</span>
    <span class="chip bg-gradient-info">Info</span>
    <span class="chip bg-gradient-danger">Danger</span>
    <span class="chip bg-gradient-warning">
        <i class="ti ti-download me-1"></i>Warning
    </span>
    <span class="chip bg-gradient-light">Light</span>
    <span class="chip bg-gradient-dark">Dark</span>
</div>

                                    
                                  

                                     
     <div class="d-flex gap-2 flex-wrap">
    <span class="chip bg-outline-secondary">Secondary</span>
    <span class="chip bg-light-info">Info</span>
    <span class="chip text-bg-danger b-r-10">Danger</span>
    <span class="chip text-light-warning">
        <i class="ti ti-download me-1"></i>Warning
    </span>
    <span class="chip bg-light shadow">Light</span>
    <span class="chip bg-dark"><span>● </span>Dark</span>
</div>