Ngorei NexaUI

<div class="nx-tabcode">  
  <div class="nx-tabcode-code">
    <h3>Bentuk Tab</h3>
    <div class="nx-tabcode-buttons">
      <button class="nx-tabcode-btn active" data-tab="tab-tabs-idx-1">Beranda</button>
      <button class="nx-tabcode-btn" data-tab="tab-tabs-idx-2">Profil</button>
      <button class="nx-tabcode-btn" data-tab="tab-tabs-idx-3">Kontak</button>
    </div>
  </div>
  <div class="tab-content" style="margin-top: 5pt;">
    <div id="tab-tabs-idx-1" class="nx-tabcode-pane active">
      Ini isi tab dari tab Beranda
    </div>
    <div id="tab-tabs-idx-2" class="nx-tabcode-pane">
      Ini isi tab dari tab Profil
    </div>
    <div id="tab-tabs-idx-3" class="nx-tabcode-pane">
      Ini isi tab dari tab Beranda
    </div>
  </div>
</div>
        

<ul class="nx-nav nx-nav-tabs" id="myTab">
  <li class="nx-nav-item">
    <a class="nx-nav-link active" href="#home">Beranda</a>
  </li>
  <li class="nx-nav-item">
    <a class="nx-nav-link" href="#profile">Profil</a>
  </li>
  <li class="nx-nav-item">
    <a class="nx-nav-link" href="#contact">Kontak</a>
  </li>
</ul>
<div class="nx-tab-content mt-3">
  <div class="nx-tab-pane active" id="home">
    Konten tab beranda...
  </div>
  <div class="nx-tab-pane" id="profile">
    Konten tab profil...
  </div>
  <div class="nx-tab-pane" id="contact">
    Konten tab kontak...
  </div>
</div>
          

<ul class="nx-nav nx-nav-pills">
  <li class="nx-nav-item">
    <a class="nx-nav-link active" href="#">Beranda</a>
  </li>
  <li class="nx-nav-item">
    <a class="nx-nav-link" href="#">Profil</a>
  </li>
  <li class="nx-nav-item">
    <a class="nx-nav-link" href="#">Kontak</a>
  </li>
</ul>
          

<ul class="nx-nav nx-nav-pills">
  <li class="nx-nav-item">
    <a class="nx-nav-link active" data-toggle="pill" href="#pills-home">Beranda</a>
  </li>
  <li class="nx-nav-item">
    <a class="nx-nav-link" data-toggle="pill" href="#pills-profile">Profil</a>
  </li>
  <li class="nx-nav-item">
    <a class="nx-nav-link" data-toggle="pill" href="#pills-contact">Kontak</a>
  </li>
</ul>
<div class="nx-tab-content">
  <div class="nx-tab-pane fade show active" id="pills-home">
    Konten tab beranda...
  </div>
  <div class="nx-tab-pane fade" id="pills-profile">
    Konten tab profil...
  </div>
  <div class="nx-tab-pane fade" id="pills-contact">
    Konten tab kontak...
  </div>
</div>
          

<ul class="nx-nav nx-flex-column">
  <li class="nx-nav-item">
    <a class="nx-nav-link active" href="#">Beranda</a>
  </li>
  <li class="nx-nav-item">
    <a class="nx-nav-link" href="#">Profil</a>
  </li>
  <li class="nx-nav-item">
    <a class="nx-nav-link" href="#">Kontak</a>
  </li>
</ul>
          

<ul class="nx-nav nx-flex-column nx-nav-pills">
  <li class="nx-nav-item">
    <a class="nx-nav-link active" href="#">Beranda</a>
  </li>
  <li class="nx-nav-item">
    <a class="nx-nav-link" href="#">Profil</a>
  </li>
  <li class="nx-nav-item">
    <a class="nx-nav-link" href="#">Kontak</a>
  </li>
</ul>