JSFiddle - React, Tailwind, and code Playground

by majikarikeruo

HTML

<ul class="p-tabs">
  <li class="p-tabs__item active"><a href="#">Menu1</a></li>
  <li class="p-tabs__item"><a href="#">Menu2</a></li>
</ul>

CSS

.p-tabs{
  display: flex;
  margin: 0;
  list-style: none;
}

.p-tabs__item{
  margin: 0 20px;
}

.p-tabs__item a{
  display: block;
  padding: 8px 12px;
  border: solid 1px #333;
  border-bottom: none;
  color: #333;
  text-decoration: none;
}

.p-tabs__item.active a{
  background: #333;
  color: #fff;
}

JavaScript

$('.p-tabs__item').on('click', function(){

	$('.active').removeClass('active');
	$(this).addClass('active');

});