JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="main-layout">
   <header class="clearfix">
    <h1 class="main-title">This Is a Test</h1>   
    <nav class="clearfix">
     <ul class="main-nav">
	  <li><a href="index.html">Home</a></li>
	  <li>
	   <span>Content1</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>Content2</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>Content3</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 {
	max-width: 100%;
	padding: 0;
	margin: auto;
}
.main-layout{
	min-height: calc(100vh - 20px);
}

header {
	background-color: orange;
	max-width: 100%;
	padding: 1px;
	margin: auto;
	}

.main-title{
	padding: 3% 5% 0;
	margin: 0;
}
	

.main-nav {
	max-width: 100%;
	padding: 0;
	margin: auto;
}

.main-nav li {
	font-size: 1.5rem;
	list-style: none;
	position: relative;
	max-width: 100%;
	padding: 0;
	margin: auto;
}

.sub-nav {
	width: 100%;
	background-color: white;
	position: absolute;
	z-index: 1;
	display: none;
	max-width: 100%;
	padding: 0;
	margin: auto;
}

.sub-nav li {
	max-width: 100%;
	padding: 0;
	margin: auto;
}

.main-nav li:hover .sub-nav {
	display: block;
}
section {
	max-width: 100%;
	padding: 0;
	margin: auto;
}
.clearfix::after {
	content="";
	display: table;
	clear: both;
}
footer {
	height: 20px;
	max-width: 100%;
	padding: 0;
	margin: auto;
}
	

@media screen and (min-width: 450px){
	.main-nav {
		  margin: 0 5%;
	     float: right;
	}
	.main-nav li {
		  padding: 5px;
		  float: left;
	}
}