<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Navs y Tabs en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 680px;">
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white">
      <h4 class="fw-bold text-dark mb-3">Plan de Estudio Dinámico</h4>

      <!-- Navegación por pestañas .nav-tabs -->
      <ul class="nav nav-tabs" id="miTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active fw-semibold" id="html-tab" data-bs-toggle="tab" data-bs-target="#html-panel" type="button" role="tab">
            HTML5
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link fw-semibold" id="css-tab" data-bs-toggle="tab" data-bs-target="#css-panel" type="button" role="tab">
            CSS3 &amp; Grid
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link fw-semibold" id="js-tab" data-bs-toggle="tab" data-bs-target="#js-panel" type="button" role="tab">
            JavaScript ES6+
          </button>
        </li>
      </ul>

      <!-- Paneles de contenido .tab-content -->
      <div class="tab-content pt-4" id="miTabContent">
        <!-- Panel HTML -->
        <div class="tab-pane fade show active" id="html-panel" role="tabpanel">
          <h5 class="fw-bold text-primary">Arquitectura y Estructura Semántica</h5>
          <p class="text-secondary">
            HTML5 define el significado y esqueleto de cada documento web con etiquetas como <code>&lt;header&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;article&gt;</code> y formularios nativos.
          </p>
        </div>

        <!-- Panel CSS -->
        <div class="tab-pane fade" id="css-panel" role="tabpanel">
          <h5 class="fw-bold text-info">Diseño Visual y Layout Bidimensional</h5>
          <p class="text-secondary">
            CSS3 controla la presentación, colores, tipografía, Flexbox, cuadrículas con CSS Grid y animaciones aceleradas por GPU a 60 FPS.
          </p>
        </div>

        <!-- Panel JavaScript -->
        <div class="tab-pane fade" id="js-panel" role="tabpanel">
          <h5 class="fw-bold text-warning">Lógica, Eventos y Asincronía</h5>
          <p class="text-secondary">
            JavaScript ES6+ permite manipular el árbol del DOM en tiempo real, capturar eventos de usuario y consumir servicios REST con <code>async/await</code> y <code>fetch()</code>.
          </p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>