<div class="badge-collection">
    <!-- 1st  -->
    <div class="relative-container">
        <p>Notification</p>
        <div class="badge top-right">4</div>
    </div>
    <!-- 2nd  -->
    <div class="relative-container">
        <p>Messages</p>
        <div class="badge lrg top-right">1</div>
    </div>
    <div class="relative-container">
        <i class="fab fa-twitter icon-badge"></i>
        <div class="badge lrg top-right">1</div>
    </div>
    <!-- 3rd  -->
    <div class="relative-container">
        <button class="btn-1">Action</button>
        <div class="badge top-left">8</div>
    </div>
    <!-- 4th  -->
    <div class="relative-container">
        <button class="btn-2 hide">Hide</button>
        <div class="badge top-right hide_it">7</div>
    </div>

</div>