Tabs

Tabs come in 2 variations

1. Basic Tabs

These tabs require JavaScript for toggling between different tab panels

Example Code 
  <nav class="tab">
    <ul>
        <li><a>Introduction</a></li>
        <li class='active'><a>Get Started</a></li>
        <li><a>Tutorials</a></li>
        <li><a>Changelog</a></li>
    </ul>
    <section>
        <h3>Accessibility Features:</h3>
        <p>
        Keyboard navigation with arrow keys, Home, and End keys
        Proper focus management
        Screen reader support through ARIA attributes
        Clear visual indicators for active and focused states
        </p>
    </section>
  </nav>

2. Radio Tabs

This semantic approach does not require JavaScript to switch the active content according to the selected tab. Building a tab component with Pure CSS using Radio and Label Tags

Example Code 
  <nav class="tab tab-radio">
      <input type="radio" name="tab" id="tab1" checked />
      <label for="tab1">Introduction</label>
      <section>
          <h3>Introduction Content</h3>
          <p>
            Introduction Features:
            Keyboard navigation with arrow keys, Home, and End keys
            Proper focus management
            Screen reader support through ARIA attributes
            Clear visual indicators for active and focused states
          </p>
      </section>

      <input type="radio" name="tab" id="tab2" />
      <label for="tab2">Get Started</label>
      <section>
          <h3>Get Started Content</h3>
          <p>
            Get started Features:
            Keyboard navigation with arrow keys, Home, and End keys
            Proper focus management
            Screen reader support through ARIA attributes
            Clear visual indicators for active and focused states
            </p>
      </section>

      <input type="radio" name="tab" id="tab3" />
      <label for="tab3">Tutorials</label>
      <section>
          <h3>Tutorials Content</h3>
          <p>
            Tutorials Features:
            Keyboard navigation with arrow keys, Home, and End keys
            Proper focus management
            Screen reader support through ARIA attributes
            Clear visual indicators for active and focused states
          </p>
      </section>

      <input type="radio" name="tab" id="tab4" />
      <label for="tab4">Changelog</label>
      <section>
          <h3>Changelog Content</h3>
          <p>
            Changelog Features:
            Keyboard navigation with arrow keys, Home, and End keys
            Proper focus management
            Screen reader support through ARIA attributes
            Clear visual indicators for active and focused states
          </p>
      </section>
  </nav>