CSS Only Tab

by Dinesh Pandiyan

HTML

<ul class="tab-group">
    <li class="single-tab">Tab 1</li>
    <li class="single-tab">Tab 2</li>
    <li class="single-tab">Very Long Tab Name</li>
    <li class="single-tab active">Tab 4</li>
    <li class="single-tab">Tab 5</li>
  </ul>

SCSS

$active-color: #262933;
$inactive-color: #B3B4B8;
$inactive-font-color: #8B8C8F;
$border-thickness: 1px;
$border-radius: 3px;

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.tab-group {
  display: flex;
  list-style: none;
}

.single-tab {
  flex: 1;
  background-color: #fff;
  border: $border-thickness solid $inactive-color;
  border-right: 0;
  border-sizing: border-box;
  color: $inactive-font-color;
  cursor: normal;
  font-size: 14px;
  padding: 9px 21px;
  margin: 0;  
  margin-left: -6px;
  text-align: center;
  user-select: none; 
}

.single-tab:first-child {
  border-radius: $border-radius 0 0 $border-radius;
}

.single-tab:last-child {
  border-radius: 0 $border-radius $border-radius 0;
  border-right: $border-thickness solid $inactive-color;
}
  
.single-tab.active {
  background-color: $active-color;
  border: $border-thickness solid $active-color;
  color: #fff;
}

.single-tab.active + .single-tab {
  border-left: 0;
}

.single-tab:last-child.active {
  border-left: 0;
}

JavaScript

$('.single-tab').on('click', function(){
    $('.single-tab').removeClass('active');
    $(this).addClass('active');
});