JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menufond">
<ul id="menu">
	<li><a href="#">Onglet 1</a></li>
	<li><a href="#">Onglet 2</a></li>
	<li><a href="#">Onglet 3</a></li>
	<li><a href="#">Onglet 4</a></li>
</ul>
</div>

CSS

body{
background-color : #b5b5b5;
padding : 0;
margin : 0;
}

#menufond{
width: 100%;
background: linear-gradient(#7cb7ff, #1b81ff);
border-radius: 0px 0px 4px 4px;
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2),
			0px 1px 0px 1px rgba(255, 255, 255, 0.5) inset,
			0px -3px 0px 1px rgba(0, 0, 0, 0.1) inset;
overflow : hidden;
height : 50px;
}

#menu{
	font-family: "Trebuchet MS";
    display: table;
	margin-right : auto;
	margin-left : auto;
	margin-top : 0;
	padding : 0;
}

#menu li{
    display: table-cell;
	width: 180px;
	transition:1s;
}

#menu li:hover{
	width:190px;
	transition:1s;
}

#menu a{
	display: block;
	line-height: 46px;
    text-align: center;
	text-decoration : none;
	color : white;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
	transition : text-shadow,color 1s;
	position:relative;  /* utilse pour l'affichage du point */
	
}

#menu a:hover{
	background: rgba(255,255,255,0.1);
	border-bottom: solid 4px rgba(255,255,255,0.8);
	color : #373737;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
	transition : text-shadow,color 1s;
}

#menu a::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 5px;
	transition:1s;
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid rgba(0,0,0,0.2);
}

#menu a:hover::before{
	border-color: rgba(255, 255, 255, 0.5) transparent transparent;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
	transition:1s
}