Simple Tabs Toggler Component In Pure CSS

Tabsy is a simple and lightweight tabs toggler switching component written in pure CSS with no dependencies.

framer motion animated tabs, react animated tabs component, react tabs component, tab content animation fadein, tab animation css, tailwind tabs animation

jQuery Plugin To Make Bootstrap 4 Tabs Scroll Horizontally

How to make use of it:

1. Download and import “tabsy.css” into an HTML page.

<link href="tabsy.css" rel="stylesheet" type="text/css">

2. Create tab navigation for split content using radio inputs and label elements like these:

<div class="tabsy">
  <input type="radio" id="tab1" name="tab" checked>
  <label class="tabButton" for="tab1">Tab One</label>
  
  <div class="tab">
    <div class="content">
      Tab 1
    </div>
  </div>
  <input type="radio" id="tab2" name="tab">
  <label class="tabButton" for="tab2">Tab Two</label>
  
  <div class="tab">
    <div class="content">
      Tab 2
    </div>
  </div>
  <input type="radio" id="tab3" name="tab">
  <label class="tabButton" for="tab3">Tab Three</label>
  
  <div class="tab">
    <div class="content">
      Tab 3
    </div>
  </div>
</div>

3. Customizing the tabs component in SASS:

// Base Colors
$tabActiveBgColor: #fff; 
$tabActiveTextColor: #5a5243;
$tabNectiveBgColor: #5a5243; 
$tabNectiveTextColor: #F5F5F5; 
// Breakpoint
$breakpoint: 768px;
// Transition
$transitionSpeed: 200ms;

Animated Tabs Component, Tabsy CSS Plugin/Github