JSFiddle - React, Tailwind, and code Playground

by Wallace Fidelis

HTML

<body>
	<div class="header">
		<div class="logo">
			<img src="img/logo.png" >
		</div>
	</div>
	<div class="menu">
		<ul  class="menu-list">
			<li>
				<a href="#">Estatísticas</a>
				<ul class="sub-menu-list">
					<li><a href="#">Diárias</a></li>
					<li><a href="#">Mensais</a></li>
					<li><a href="#">Anuais</a></li>
					<li><a href="#">Gerais</a></li>
				</ul>
			</li>
			<li><a href="#">Comentários</a></li>
			<li><a href="#">Sugestões</a></li>
			<li>
				<a href="#">Conta</a>
				<ul class="sub-menu-list">
					<li><a href="#">Usuário</a></li>
					<li><a href="#">Mudar Senha</a></li>
				</ul>
			</li>
		</ul>
	</div>

</body>
</html>

CSS

html{
	width: 100%;
	margin: 0;
	padding: 0;
	min-width: 1500px;
}
body{
	margin: 0;
	padding: 0;
}
.header{
	width: 100%;
	height: 30%;
	min-height: 250px;
	background-color: white;
}
.logo > img{
	height: 150px;
	width: auto;
	margin: 50px 30% 0 30%;
}
.menu{
	width: 100%;
	height: 50px;
	background-color: black;
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
}
.menu > ul > li {
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
}
.menu-list > li  a{
	font-size: 16px;
	font-weight: 900;
	text-transform: uppercase;
	min-width: 160px;
	color: white;
	float: left;
	position: relative;
	height: 20px;
	background-color: black;
	padding: 15px;
	text-align: left;
	text-decoration: none;
  	letter-spacing:0.2em;
  	margin: 0;
}
.menu-list li:hover a{
	background-color: rgb(22,160,133);
}
.menu-list:after{
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.menu > ul{
	margin:0 20%;	
}
.sub-menu-list {
	top: 50px;
	display: none;
	min-width: 160px;
	position: absolute;
	z-index: 1000;
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu-list li:hover > .sub-menu-list{
	display: block;
}