JSFiddle - React, Tailwind, and code Playground

by S.M. Murad Hasan Tanvir

HTML

<header class="mainheader">
  <nav class="nav">
	<ul>
		<li>Home</li>
		<li>
			<a href="/">League</a>
		</li>
		<li>Dropdown
			<ul class="nav-dropdown">
				<li><a href="#">bbva</a></li>
				<li><a href="#">barclays premier league</a></li>
			</ul>
		</li>
		<li><a href="/">Contact</a></li>
	</ul>
  </nav>
</header>

CSS

<style>
.mainheader{
  background: #555;
}
.mainheader, .header-text, .header-text-soccer {
    background-color: green;
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 20px;
    height: 60px;
    border-radius: 6px;
	position: relative;
}

.mainheader nav ul li a {
    text-decoration: none;
    color: white;
}

.mainheader nav ul li ul{
	display: none;
}

.mainheader nav ul li {
    display: inline-flex;
    padding: 20px;
    color: white;
}

.nav ul li:hover {
  background-color: #41a608;
  border-radius: 2px;
}

.nav ul li:hover ul{
	background: #aaa none repeat scroll 0 0;
    display: block;
    margin-left: -20px;
    padding: 0;
    position: absolute;
    top: 60px;
    width: 200px;
}

.mainheader nav ul li ul li{
	box-sizing: border-box;
    color: white;
    display: inline-block;
    padding: 20px;
    width: 100%;
}
</style>