JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://user.oc-static.com/upload/2017/05/13/14946804986613_logo.png"></script>
<body>
    <nav>
		<ul>
			<li><a href="#" class="active">Menu1</a></li>
			<li><a href="#">Menu2</a></li>
			<li><a href="#">Menu3</a></li>
			<li><a href="#">Menu4</a></li>
		</ul>
		
	</nav>
	<ul class="sous">
		<li><a href="#">Sous-menu1</a></li>
		<li><a href="#">Sous-menu2</a></li>
		<li><a href="#" class="active">Sous-menu3</a></li>
	</ul>
  </body>

CSS

body {
	background:#bbb;
	font-family:arial, sans-serif;
}


nav {
	background: rgba(255,255,255,0.4);
	height:50px;
    background: linear-gradient(to bottom, rgba(114, 46, 46, 1) 0%,rgba(0,0,0,0) 48%,rgba(114, 46, 46, 1) 100%);
	border:#000 2px solid;
	margin-top:50px;
}

nav ul{
	margin:-45px 0 0 -40px;
	list-style:none;
	font-size:0;
	text-align:center;
}

nav ul li, .sous li {
	font-size:14px;
	font-weight:bold;
	display:inline-block;
	width:22%;
	height:45px;
	line-height:45px;
	text-align:center;
	margin-right:1%;
}

nav ul li a {
	font-weight:bold;
	color:#000;
	text-decoration:none;
	background:#fff;
	color:#000;
	-webkit-border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
	border:#000 2px solid;
	display:block;
    height:41px;
}

nav ul li a.active, nav ul li a:hover {
	background:rgba(114, 46, 46, 1);
	color:#fff;
	border-bottom:rgba(114, 46, 46, 1) 2px solid;
}

.sous li a.active, .sous li a:hover {
	background:rgba(114, 46, 46, 1);
	color:#fff;
	border-top:rgba(114, 46, 46, 1) 2px solid;
}

ul.sous {
	margin:-2px 0 0 -40px;
	text-align:center;
}

ul.sous li a {
	font-weight:bold;
	color:#000;
	text-decoration:none;
	background:#fff;
	color:#000;
	-webkit-border-radius:0 0 10px 10px ;
	-moz-border-radius:0 0 10px 10px ;
	border-radius:0 0 10px 10px ;
	border:#000 2px solid;
	display:block;
  height:41px;
}