<link rel="stylesheet" href="../dist/css/navigation.css">

    <ul class="nav nav-pills mb-4" id="pills-tab" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Publicados</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Em rascunho</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Concedidos</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="pills-archived-tab" data-bs-toggle="pill" href="#pills-archived" role="tab" aria-controls="pills-archived" aria-selected="false">Arquivados</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="pills-trash-tab" data-bs-toggle="pill" href="#pills-trash" role="tab" aria-controls="pills-trash" aria-selected="false">Lixeira</a>
      </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Conteúdo 1</div>
      <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Conteúdo 2</div>
      <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Conteúdo 3</div>
      <div class="tab-pane fade" id="pills-archived" role="tabpanel" aria-labelledby="pills-archived-tab" tabindex="0">Conteúdo 4</div>
      <div class="tab-pane fade" id="pills-trash" role="tabpanel" aria-labelledby="pills-trash-tab" tabindex="0">Conteúdo 5</div>
    </div>
  

  
    <link rel="stylesheet" href="../dist/css/custom.css">

    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item" role="presentation">
        <div class="d-flex align-items-center mb-3">
          <a class="centered-icon-text nav-link active" id="pills-list-tab" data-bs-toggle="pill" href="#pills-list" role="tab" aria-controls="pills-list" aria-selected="true">
            <i class="material-icons">list</i>
            <span class="ms-2 font-title">Lista</span>
          </a>
        </div>
      </li>
      <li class="nav-item" role="presentation">
        <div class="d-flex align-items-center mb-3">
          <a class="centered-icon-text nav-link" id="pills-map-tab" data-bs-toggle="pill" href="#pills-map" role="tab" aria-controls="pills-map" aria-selected="false">
            <i class="material-icons">map</i>
            <span class="ms-2 font-title">Mapa</span>
          </a>
        </div>
      </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="pills-list" role="tabpanel" aria-labelledby="pills-list-tab" tabindex="0">Conteúdo 1</div>
      <div class="tab-pane fade" id="pills-map" role="tabpanel" aria-labelledby="pills-map-tab" tabindex="0">Conteúdo 2</div>
    </div>