<div class="d-flex align-items-center justify-content-between py-3 px-7">
    <h5 class="mb-0 fs-5 fw-semibold">Notifications</h5>
    <span class="badge text-bg-primary rounded-4 px-3 py-1 lh-sm">5 new</span>
</div>
<div class="message-body" data-simplebar>
    <a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
        <span class="me-3">
            <img src="{{ asset('assets/images/profile/user-1.jpg') }}" alt="user" class="rounded-circle" width="48"
                height="48" />
        </span>
        <div class="w-75 d-inline-block v-middle">
            <h6 class="mb-1 fw-semibold lh-base">Roman Joined the Team!</h6>
            <span class="fs-2 d-block text-body-secondary">Congratulate him</span>
        </div>
    </a>
    <a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
        <span class="me-3">
            <img src="{{ asset('assets/images/profile/user-2.jpg') }}" alt="user" class="rounded-circle"
                width="48" height="48" />
        </span>
        <div class="w-75 d-inline-block v-middle">
            <h6 class="mb-1 fw-semibold lh-base">New message</h6>
            <span class="fs-2 d-block text-body-secondary">Salma sent you new message</span>
        </div>
    </a>
    <a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
        <span class="me-3">
            <img src="{{ asset('assets/images/profile/user-3.jpg') }}" alt="user" class="rounded-circle"
                width="48" height="48" />
        </span>
        <div class="w-75 d-inline-block v-middle">
            <h6 class="mb-1 fw-semibold lh-base">Bianca sent payment</h6>
            <span class="fs-2 d-block text-body-secondary">Check your earnings</span>
        </div>
    </a>
    <a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
        <span class="me-3">
            <img src="{{ asset('assets/images/profile/user-4.jpg') }}" alt="user" class="rounded-circle"
                width="48" height="48" />
        </span>
        <div class="w-75 d-inline-block v-middle">
            <h6 class="mb-1 fw-semibold lh-base">Jolly completed tasks</h6>
            <span class="fs-2 d-block text-body-secondary">Assign her new tasks</span>
        </div>
    </a>
    <a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
        <span class="me-3">
            <img src="{{ asset('assets/images/profile/user-5.jpg') }}" alt="user" class="rounded-circle"
                width="48" height="48" />
        </span>
        <div class="w-75 d-inline-block v-middle">
            <h6 class="mb-1 fw-semibold lh-base">John received payment</h6>
            <span class="fs-2 d-block text-body-secondary">$230 deducted from account</span>
        </div>
    </a>
</div>
<div class="py-6 px-7 mb-1">
    <button class="btn btn-outline-primary w-100">See All Notifications</button>
</div>