Press "Enter" to skip to content

Simple Tabs Toggler Component In Pure CSS | Tabsy

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


See Demo And Download

Official Website(robiveli): Click Here

This superior jQuery/javascript plugin is developed by robiveli. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.