<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="<?= base_url('assets/images/profile/user-2.jpg'); ?>" alt="user" class="rounded-circle" width="48" height="48" />
    </span>
    <div class="w-100">
      <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="<?= base_url('assets/images/profile/user-3.jpg'); ?>" alt="user" class="rounded-circle" width="48" height="48" />
    </span>
    <div class="w-100">
      <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="<?= base_url('assets/images/profile/user-4.jpg'); ?>" alt="user" class="rounded-circle" width="48" height="48" />
    </span>
    <div class="w-100">
      <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="<?= base_url('assets/images/profile/user-5.jpg'); ?>" alt="user" class="rounded-circle" width="48" height="48" />
    </span>
    <div class="w-100">
      <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="<?= base_url('assets/images/profile/user-6.jpg'); ?>" alt="user" class="rounded-circle" width="48" height="48" />
    </span>
    <div class="w-100">
      <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>
  <a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
    <span class="me-3">
      <img src="<?= base_url('assets/images/profile/user-7.jpg'); ?>" alt="user" class="rounded-circle" width="48" height="48" />
    </span>
    <div class="w-100">
      <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>
</div>
<div class="py-6 px-7 mb-1">
  <button class="btn btn-outline-primary w-100">See All Notifications</button>
</div>