<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <!-- Introductory callout -->
  <div class="tw-callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>TABS:</strong> Content organization with switchable panels<br>
      <strong>VARIANTS:</strong> Underline (default) | Vertical
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Use tabs to organize content into distinct sections. Includes keyboard navigation (Arrow keys, Home/End) and full ARIA support. Replaces the old Nav Tabs/Pills component.
    </p>
  </div>
  <!-- Basic Tabs (Underline) -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Basic Tabs (Underline)</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Default underline style:</strong> Clean, minimal tabs with active indicator. Use for section switching within a page.
      </p>
    </div>
    <div data-controller="tabs">
      <div class="tw-tabs" role="tablist">
        <button class="tw-tab" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
          All Applications
        </button>
        <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
          Submitted
        </button>
        <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
          Draft
        </button>
        <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
          Archived
        </button>
      </div>
      <div class="tw-tab-content">
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">All applications content goes here. This panel shows all applications regardless of status.</p>
            </div>
          </div>
        </div>
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">Submitted applications only. Filtering to show applications that have been submitted.</p>
            </div>
          </div>
        </div>
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">Draft applications. Shows applications that families have started but not yet submitted.</p>
            </div>
          </div>
        </div>
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">Archived applications. Historical applications that are no longer active.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div data-controller="tabs">...</div></code>
    </div>
  </div>
  <!-- Alignment Variants -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Alignment Variants</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Alignment options:</strong> Center, end, fill, or justified tab layouts.
      </p>
    </div>
    <div class="tw:space-y-6">
      <!-- Center -->
      <div>
        <h3 class="tw-h5 tw:mb-3">Center Aligned</h3>
        <div data-controller="tabs">
          <div class="tw-tabs tw-tabs-center" role="tablist">
            <button class="tw-tab" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select" type="button">Overview</button>
            <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select" type="button">Details</button>
            <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select" type="button">Settings</button>
          </div>
          <div class="tw-tab-content">
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Overview content</p>
              </div>
            </div>
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Details content</p>
              </div>
            </div>
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Settings content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End -->
      <div>
        <h3 class="tw-h5 tw:mb-3">End Aligned</h3>
        <div data-controller="tabs">
          <div class="tw-tabs tw-tabs-end" role="tablist">
            <button class="tw-tab" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select" type="button">Info</button>
            <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select" type="button">Actions</button>
          </div>
          <div class="tw-tab-content">
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Info content</p>
              </div>
            </div>
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Actions content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Fill -->
      <div>
        <h3 class="tw-h5 tw:mb-3">Fill (Equal Width)</h3>
        <div data-controller="tabs">
          <div class="tw-tabs tw-tabs-fill" role="tablist">
            <button class="tw-tab" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select" type="button">Personal</button>
            <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select" type="button">Address</button>
            <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select" type="button">Education</button>
          </div>
          <div class="tw-tab-content">
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Personal details</p>
              </div>
            </div>
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Address information</p>
              </div>
            </div>
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Education history</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Justified -->
      <div>
        <h3 class="tw-h5 tw:mb-3">Justified (Full Width)</h3>
        <div data-controller="tabs">
          <div class="tw-tabs tw-tabs-justified" role="tablist">
            <button class="tw-tab" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select" type="button">Step 1</button>
            <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select" type="button">Step 2</button>
            <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select" type="button">Step 3</button>
          </div>
          <div class="tw-tab-content">
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Step 1 content</p>
              </div>
            </div>
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Step 2 content</p>
              </div>
            </div>
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Step 3 content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-tabs tw-tabs-center">...</div></code><br>
      <code><div class="tw-tabs tw-tabs-fill">...</div></code>
    </div>
  </div>
  <!-- Size Variants -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Size Variants</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Sizes:</strong> Small for compact spaces, default for general use, large for prominent navigation.
      </p>
    </div>
    <div class="tw:space-y-6">
      <!-- Small -->
      <div>
        <h3 class="tw-h5 tw:mb-3">Small Tabs</h3>
        <div data-controller="tabs">
          <div class="tw-tabs tw-tabs-sm" role="tablist">
            <button class="tw-tab" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select" type="button">Active</button>
            <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select" type="button">Inactive</button>
          </div>
          <div class="tw-tab-content">
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:text-sm tw:mb-0">Active items</p>
              </div>
            </div>
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:text-sm tw:mb-0">Inactive items</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Large -->
      <div>
        <h3 class="tw-h5 tw:mb-3">Large Tabs</h3>
        <div data-controller="tabs">
          <div class="tw-tabs tw-tabs-lg" role="tablist">
            <button class="tw-tab" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select" type="button">Dashboard</button>
            <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select" type="button">Analytics</button>
          </div>
          <div class="tw-tab-content">
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Dashboard overview</p>
              </div>
            </div>
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw-card tw-card-body">
                <p class="tw:mb-0">Analytics reports</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-tabs tw-tabs-sm">...</div></code><br>
      <code><div class="tw-tabs tw-tabs-lg">...</div></code>
    </div>
  </div>
  <!-- Tabs with Badges -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Tabs with Badges</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Count badges:</strong> Add badges to show counts or status within tabs.
      </p>
    </div>
    <div data-controller="tabs">
      <div class="tw-tabs" role="tablist">
        <button class="tw-tab" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
          All
          <span class="tw-badge tw-badge-secondary tw-badge-sm">245</span>
        </button>
        <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
          Submitted
          <span class="tw-badge tw-badge-success tw-badge-sm">156</span>
        </button>
        <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
          Draft
          <span class="tw-badge tw-badge-warning tw-badge-sm">67</span>
        </button>
        <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
          Rejected
          <span class="tw-badge tw-badge-danger tw-badge-sm">22</span>
        </button>
      </div>
      <div class="tw-tab-content">
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">All applications (245 total)</p>
            </div>
          </div>
        </div>
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">Submitted applications (156 items)</p>
            </div>
          </div>
        </div>
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">Draft applications (67 items)</p>
            </div>
          </div>
        </div>
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">Rejected applications (22 items)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><button class="tw-tab">Label <span class="tw-badge tw-badge-sm">Count</span></button></code>
    </div>
  </div>
  <!-- Disabled Tabs -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Disabled Tabs</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Disabled state:</strong> Use <code>.tw-disabled</code> class to prevent interaction. Keyboard navigation skips disabled tabs.
      </p>
    </div>
    <div data-controller="tabs">
      <div class="tw-tabs" role="tablist">
        <button class="tw-tab" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
          Basic Info
        </button>
        <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
          Contact Details
        </button>
        <button class="tw-tab tw-disabled" role="tab" aria-selected="false" aria-disabled="true" data-tabs-target="tab" type="button">
          Payment (Locked)
        </button>
        <button class="tw-tab tw-disabled" role="tab" aria-selected="false" aria-disabled="true" data-tabs-target="tab" type="button">
          Confirmation (Locked)
        </button>
      </div>
      <div class="tw-tab-content">
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">Basic information form</p>
            </div>
          </div>
        </div>
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">Contact details form</p>
            </div>
          </div>
        </div>
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">Payment (not accessible)</p>
            </div>
          </div>
        </div>
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <p class="tw:mb-0">Confirmation (not accessible)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><button class="tw-tab tw-disabled" aria-disabled="true">Locked</button></code>
    </div>
  </div>
  <!-- Vertical Tabs -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Vertical Tabs</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Vertical layout:</strong> Tabs stacked vertically for sidebar navigation or settings pages.
      </p>
    </div>
    <div data-controller="tabs">
      <div class="tw:flex tw:gap-4">
        <div class="tw-tabs tw-tabs-vertical" role="tablist">
          <button class="tw-tab" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
            General
          </button>
          <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
            Application Form
          </button>
          <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
            Email Templates
          </button>
          <button class="tw-tab" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" type="button">
            Integrations
          </button>
        </div>
        <div class="tw-tab-content tw:flex-1 tw:mt-0">
          <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
            <div class="tw-card">
              <div class="tw-card-body">
                <p class="tw:mb-0">General settings</p>
              </div>
            </div>
          </div>
          <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
            <div class="tw-card">
              <div class="tw-card-body">
                <p class="tw:mb-0">Application form configuration</p>
              </div>
            </div>
          </div>
          <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
            <div class="tw-card">
              <div class="tw-card-body">
                <p class="tw:mb-0">Email template management</p>
              </div>
            </div>
          </div>
          <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
            <div class="tw-card">
              <div class="tw-card-body">
                <p class="tw:mb-0">Third-party integrations</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-tabs tw-tabs-vertical">...</div></code>
    </div>
  </div>
  <!-- Prototype Migration Reference -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Prototype & Old Component Migration</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Migration reference:</strong> How to migrate from prototype tabs and old Nav Tabs/Pills component.
      </p>
    </div>
    <div class="tw:overflow-x-auto">
      <table class="tw-table tw-table-bordered tw-table-sm">
        <thead>
          <tr>
            <th>Old Class</th>
            <th>New Class</th>
            <th>Notes</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>.nav.nav-tabs</code></td>
            <td><code>.tw-tabs</code></td>
            <td>Old Nav Tabs → Underline tabs</td>
          </tr>
          <tr>
            <td><code>.nav-item</code></td>
            <td>(not needed)</td>
            <td>Tabs are direct children</td>
          </tr>
          <tr>
            <td><code>.nav-link</code></td>
            <td><code>.tw-tab</code></td>
            <td>Individual tab button</td>
          </tr>
          <tr>
            <td><code>.nav-link.active</code></td>
            <td><code>.tw-tab.tw-active</code></td>
            <td>Active state</td>
          </tr>
          <tr>
            <td><code>.nav-fill</code></td>
            <td><code>.tw-tabs-fill</code></td>
            <td>Equal width tabs</td>
          </tr>
          <tr>
            <td><code>.nav-justified</code></td>
            <td><code>.tw-tabs-justified</code></td>
            <td>Full width distribution</td>
          </tr>
          <tr>
            <td>Prototype: <code>.tabs</code></td>
            <td><code>.tw-tabs</code></td>
            <td>Same class name</td>
          </tr>
          <tr>
            <td>Prototype: <code>.tab</code></td>
            <td><code>.tw-tab</code></td>
            <td>Same class name</td>
          </tr>
          <tr>
            <td>Prototype: <code>.inner-tabs</code></td>
            <td><code>.tw-tabs.tw-tabs-sm</code></td>
            <td>Nested/secondary tabs</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- Keyboard Navigation Reference -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Keyboard Navigation</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Accessibility:</strong> Full keyboard support with arrow keys, Home/End navigation.
      </p>
    </div>
    <div class="tw:overflow-x-auto">
      <table class="tw-table tw-table-sm">
        <thead>
          <tr>
            <th>Key</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><kbd>Arrow Left</kbd> / <kbd>Arrow Up</kbd></td>
            <td>Move to previous tab (wraps to end)</td>
          </tr>
          <tr>
            <td><kbd>Arrow Right</kbd> / <kbd>Arrow Down</kbd></td>
            <td>Move to next tab (wraps to start)</td>
          </tr>
          <tr>
            <td><kbd>Home</kbd></td>
            <td>Jump to first tab</td>
          </tr>
          <tr>
            <td><kbd>End</kbd></td>
            <td>Jump to last tab</td>
          </tr>
          <tr>
            <td><kbd>Tab</kbd></td>
            <td>Move focus out of tab list (standard behavior)</td>
          </tr>
        </tbody>
      </table>
    </div>
    <p class="tw:text-sm tw:text-gray-600 tw:mt-4">
      <strong>Note:</strong> Disabled tabs are automatically skipped during keyboard navigation.
    </p>
  </div>
</div>