JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="head">
	<li class="active"><a href="#">Tab A</a></li>
	<li><a href="#">Tab B</a></li>
	<li><a href="#">Tab C</a></li>
	<li><a href="#">Tab D</a></li>
	<li><a href="#">Tab Ddddddd</a></li>
  </ul>

SCSS

.head
	{
		margin: 0;
        padding: 0;
        list-style: none;
  
		width: 100%;
		display: table;
		table-layout: fixed;

		li
		{
			display: table-cell;

			a
			{
				display: block;
                padding: 10px;
				background: #e9e9e9;
				border: 2px solid #ccc;
				border-right: none;

				text-align: center;
				text-transform: uppercase;
                text-decoration: none;
			}
		}

		li:last-child
		{
			a
			{
				border-right: 2px solid #ccc;
			}
		}

		li.active
		{
			
			 

			a
			{
				position: relative;
				background: #fff;
				 
                box-shadow: 0px -10px 0px green;
				
			}
		}
	}

JavaScript

$(function() {
  $('a').click(function() {
    $('li').removeClass('active');
    $(this).parent().addClass('active');
  });
});