JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-layout">
  <body>
   <header class="clearfix">
    <h1> This is a Test</h1>
    <nav>
	 <ul class="main-nav">
	  <li>
	   <a href="index.html">Home</a>
	  </li>
	  <li>
	   <span> Content 1</span>
	   <ul class="sub-nav">
	    <li><a href="page1.html">Page 1</a></li>
	    <li><a href="page2.html">Page 2</a></li>
	    <li><a href="page3.html">Page 3</a></li>
	   </ul>
	  </li>
	  <li>
	   <span> Content 2</span>
	   <ul class="sub-nav">
	    <li><a href="page4.html">Page 4</a></li>
	    <li><a href="page5.html">Page 5</a></li>
	    <li><a href="page6.html">Page 6</a></li>
	  </ul>
	  </li>
	  <li>
	   <span>Content 3</span>
	   <ul class="sub-nav">
	    <li><a href="page7.html">Page 7</a></li>
	    <li><a href="page8.html">Page 8</a></li>
	    <li><a href="page9.html">Page 9</a></li>
	   </ul>
	  </li>
	 </ul>
	</nav>
   </header>
   <section>
   </section>
   </div>
   <footer>
    <span>footer content</span>
   </footer>
  </body>

CSS

body {
    margin: auto;
	padding: 0;
	max-width: 100%;
}
.main-layout{
	min-height: calc(100vh - 20px);
}
header {
	background-color: orange;
    margin: auto;
	padding: 0;
	width: 100%;
}

header h1{
	float: left;
}


nav {
	background-color: yellow;
	float: right;
	width: 100%;
	top: 0;
    margin: auto;
	padding: 0;
	max-width: 100%;
}

.main-nav {
	position: relative;
	float: right;
	font-size: 1.5em;
	margin: auto;
	padding: 0;
	max-width: 100%;
}

.main-nav li{
	background-color: blue;
	list-style: none;
	margin: 0 5px;
	padding: 0;
	max-width: 100%;
}
.main-nav > li{
	float: left;
}
.sub-nav {
background-color: red;
	width: 100%;
	display: block;
	margin: auto;
	position: absolute;
	padding: 0;
	max-width;
}

.main-nav li:hover .sub-nav {
	display: block;
}

section {
    margin: auto;
	padding: 0;
	max-width: 100%;
}

.clearfix::after{
	content:"";
	display: table;
	clear: both;
}
footer {
	height: 20px;
    margin: auto;
	padding: 0;
	max-width: 100%;
}