<div class="dropdown dropdown-notification">
  <button class="btn btn-light dropdown-toggle" type="button" id="notificationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="material-icons">notifications</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end custom-notification-dropdown" aria-labelledby="notificationDropdown" style="min-width: 400px;">
    <li>
      <div class="dropdown-header custom-notification-header">
        <strong>Você não tem novas notificações</strong>
      </div>

      <div class="dropdown-item-notification custom-notification-item">
        <div class="d-flex justify-content-between">
          <span>Você <strong>aceitou</strong> o convite para administrar a plataforma mapas do SuperAdmin <strong class="dropdown-color-text">Anne Elisa</strong>.</span>
        </div>
        <div class="dropdown-help-section">
          <span class="material-icons align-middle dropdown-color-icon">help_outline</span>
          <a href="#" class="dropdown-color-link">O que isso significa?</a>
        </div>
        <small class="dropdown-text-muted">Transferida em 00/00/0000 às 00h00 | Aceito em 00/00/0000 às 00h00</small>
      </div>
    </li>
    <li><hr class="dropdown-divider"></li>
    <li>
      <div class="dropdown-item-notification custom-notification-item">
        <div class="d-flex justify-content-between">
          <span>Você <strong>recusou</strong> o convite para administrar a plataforma mapas do SuperAdmin <strong class="dropdown-color-text">Anne Elisa</strong>.</span>
        </div>
        <div class="dropdown-help-section">
          <span class="material-icons align-middle dropdown-color-icon">help_outline</span>
          <a href="#" class="dropdown-color-link">O que isso significa?</a>
        </div>
        <small class="dropdown-text-muted">Transferida em 00/00/0000 às 00h00 | Recusado em 00/00/0000 às 00h00</small>
      </div>
    </li>
  </ul>
</div>