Overview

These tabs are built with pure CSS using the radio button trick. No JavaScript needed!

The tabs are fully accessible and work with keyboard navigation.

Features

• Zero JavaScript
• Smooth transitions
• Keyboard accessible
• Customizable colors
• Responsive design

Usage

<div class="tabs">
  <input type="radio" id="tab1" name="tabs" checked>
  <label class="tab-label" for="tab1">Tab 1</label>
  
  <input type="radio" id="tab2" name="tabs">
  <label class="tab-label" for="tab2">Tab 2</label>
  
  <div class="content">
    <div class="tab-content">Content 1</div>
    <div class="tab-content">Content 2</div>
  </div>
</div>