JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
		<!--header-->
		<div class="header clearfix">
				<h1><a href="index.html">六角學院</a></h1>
					<ul class="menu">
						<li class="indexhere">
							<a href="index.html">首頁</a>
						</li>
						<li class="coursehere">
							<a href="course.html">課程</a>
						</li>
						<li class="faqhere">
							<a href="faq.html">問答</a>
						</li>
					</ul>				
			
		</div>			
		<div class="banner clearfix">
		</div>

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==================*/
.header{
	width: 1000px;
	position: absolute;
	z-index:2;
	background:rgba(164,164,164,0.5);
	padding:20px 5px;
	box-sizing: border-box;
}
.header h1{
	float: left;
	width: 170px;
	height: 36px;
	background:url(https://upload.cc/i1/2019/07/11/9SGBEk.png
) no-repeat;
	text-indent:101%;
	overflow:hidden;
	white-space: nowrap;
	margin-left:10px;
}

.menu{
	float:right;	
}
.menu li{
	display: inline-block;
	float:left;	
}
.menu{
  height:40px;
}
.menu a{
	display: inline-block;
	text-decoration: none;
	color:white;
	/*padding:0 15px 19px 15px;*/
	margin:0 15px;
  padding-top:15px;
  padding-bottom:5px;
  box-sizing:border-box;
}
.menu a:hover{
	color:#00cc99;
	border-bottom: 5px solid #00cc99;
	padding-bottom: 19px;
}
/*==================banner==================*/
.banner{
	width:1000px;
	height: 560px;
	position: relative;
	z-index: 1;	
	background:url(https://upload.cc/i1/2019/07/11/xrLyKR.jpg
);
}