JSFiddle - React, Tailwind, and code Playground

HTML

<!-- assume the border-bottom is only applied to an active=clicked navigation tab -->
<h1 style="border-bottom: 3px solid green;">Tab1</h1>
<h1>Tab2</h1>

CSS

h1 {
	color: #666;
    position: relative;
    display: inline-block;
}

h1:after {
	position: absolute;
  left: 50%;
	content: '';
	height: 5px;
    background: #f00;
    transition: all 0.5s linear;
    width: 0;
    bottom: 0;  
}

h1:hover:after {
	width: 100%;
  left:0px;
}