JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-tw">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="cssreset.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="wraper">
		<div class="header clearfix">
			<ul class="menu clearfix">
			  <li><a href="#">home</a></li>
			  <li><a href="#">about</a></li>
			  <li><a href="#">fqa</a></li>
		  </ul>
		</div>
    <br/> 
		<div class="header clearfix">
			<ul class="menu1 clearfix">
			  <li><a href="#">home</a></li>
			  <li><a href="#">about</a></li>
			  <li><a href="#">fqa</a></li>
		  </ul>
		</div>
    
    
	</div>
</body>
</html>

CSS

body{
	font-family: "Noto Sans","Microsoft JhengHei";
	font-size: 15px;
	color: #333333;
}
.wrap{
	width: 1000px;
	margin:0 auto;
}
.clearfix:after{
  content:'';
  display:table;
  clear:both;
}
.header{
	background:rgba(244,240,230,0.5);
}
.menu{
  height: 20px;
	padding:10px 20px;
}
.menu li{
	float: left;
}
.menu a{
	display:block;
	text-decoration: none;
	color:#323228;  
	margin:0 10px;
  padding-bottom:7px;
  box-sizing:border-box;
}
.menu a:hover{
	border-bottom: 3px solid #96ceb4 ;
  color:#96ceb4
}

/*menu1未加高度滑鼠滑入header會往下跑*/
.header{
	background:rgba(244,240,230,0.5);
}
.menu1{
	padding:10px 20px;
}
.menu1 li{
	float: left;
}
.menu1 a{
	display:block;
	text-decoration: none;
	color:#323228;  
	margin:0 10px;
  padding-bottom:7px;
  box-sizing:border-box;
}
.menu1 a:hover{
	border-bottom: 3px solid #96ceb4 ;
  color:#96ceb4
}