@govbr-ds/core/dist/components/tab/examples/tab-inverted.html

Padrão Digital de Governo

<div class="bg-gray-60 p-3">
  <div class="br-tab dark-mode">
    <nav class="tab-nav">
      <ul>
        <li class="tab-item active" title="Sobre">
          <button type="button" data-panel="panel-1-inverted"><span class="name">Sobre</span></button>
        </li>
        <li class="tab-item" title="Todos">
          <button type="button" data-panel="panel-2-inverted"><span class="name">Todos</span></button>
        </li>
        <li class="tab-item" title="Notícias">
          <button type="button" data-panel="panel-3-inverted"><span class="name">Notícias</span></button>
        </li>
        <li class="tab-item" title="Serviços">
          <button type="button" data-panel="panel-4-inverted"><span class="name">Serviços</span></button>
        </li>
        <li class="tab-item" title="Aplicativos">
          <button type="button" data-panel="panel-5-inverted"><span class="name">Aplicativos</span></button>
        </li>
        <li class="tab-item" title="Mídias">
          <button type="button" data-panel="panel-6-inverted"><span class="name">Mídias</span></button>
        </li>
      </ul>
    </nav>
    <div class="tab-content">
      <div class="tab-panel active" id="panel-1-inverted">
        <p>Painel Sobre</p>
      </div>
      <div class="tab-panel" id="panel-2-inverted">
        <p>Painel Todos</p>
      </div>
      <div class="tab-panel" id="panel-3-inverted">
        <p>Painel Noticias</p>
      </div>
      <div class="tab-panel" id="panel-4-inverted">
        <p>Painel Serviços</p>
      </div>
      <div class="tab-panel" id="panel-5-inverted">
        <p>Painel Aplicativos</p>
      </div>
      <div class="tab-panel" id="panel-6-inverted">
        <p>Painel Mídias</p>
      </div>
    </div>
  </div>
</div>