Pestañas web con (CSS/JS)

Este es un proyecto de pestañas diseñado para mostrar contenido en diferentes secciones de una página web. Las pestañas son navegables mediante un controlador de pestañas situado en la parte superior y pueden adaptarse a cualquier diseño de página.

<style>
  .tab {
    overflow: hidden;
    text-align: center;
  }

  .tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 20px;
    transition: 0.3s;
    font-size: 17px;
    margin: 30px 0;
  }

  .tab button:hover {
    border-bottom: 1px solid;
  }

  .tab button.active {
    border-bottom: 1px solid;
  }

  .tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
    text-align: center;
  }
</style>

<div class="tab">
  <button class="tablinks active" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>

<div id="tab1" class="tabcontent">
  Contents of tab 1
</div>

<div id="tab2" class="tabcontent">
  Contents of tab 2
</div>

<div id="tab3" class="tabcontent">
  Contents of tab 3
</div>

<script>
  function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }

  document.addEventListener("DOMContentLoaded", function() {
    openTab(event, 'tab1');
  });
</script>