Ejemplos de código - Constancia

by Mifiel

HTML

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplos de Código</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background: #f4f5f7;
        padding: 40px 24px;
      }

      .code-tabs {
        max-width: 900px;
        margin: 0 auto;
      }

      .tabs-header {
        display: flex;
        gap: 4px;
      }

      .tab-btn {
        background: #eef0f3;
        border: 1px solid #e1e4e9;
        border-bottom: none;
        color: #5c6270;
        padding: 12px 26px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        border-radius: 8px 8px 0 0;
        transition: background 0.15s ease, color 0.15s ease;
        position: relative;
        top: 1px;
      }

      .tab-btn:hover {
        background: #e4e7ec;
        color: #1a1a2e;
      }

      .tab-btn.active {
        background: #ffffff;
        color: #1a1a2e;
        border-color: #e1e4e9;
        border-bottom: 1px solid #ffffff;
      }

      .tabs-body {
        background: #ffffff;
        border: 1px solid #e1e4e9;
        border-radius: 0 10px 10px 10px;
        position: relative;
        overflow: hidden;
      }

      .tab-panel {
        display: none;
        position: relative;
      }

      .tab-panel.active {
        display: block;
      }

      pre {
        margin: 0;
        padding: 24px;
        background: #f6f7f9;
        overflow-x: auto;
        overflow-y: visible;
      }

      code {
        font-family: "Fira Code", "SFMono-Regular", Consolas, Menlo, monospace;
        font-size: 13.5px;
        line-height: 1.65;
        color: #2b2f3a;
        white-space: pre;
      }
    </style>
  </head>
  <body>
    <div class="code-tabs">
 ...