JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="main-layout">
   <header class="clearfix">
    <h1 class="main-title clearfix">This Is a Test</h1>   
    <nav>
     <ul class="main-nav clearfix">
	  <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>
   <div class="content-layout">
    <section>
     <p class="para-1">ajajakjkgjnkjfgakjfgjansfjfnasjjajjasjasjfajsjgjaspusfa
	 ppppppppsubgpiubpeurgurpgasnabppsmoijfpgobigjbobgajfbgiasddsfajs;sffofowe
	 SDPOAF[OIPUBosadofiiaosrubgg[oi[oisif[oiw[oifaaaefafefaefaefaeaefaefaefae
	 ASDN;FJJSFDNFFEI;LKDFK;I;EIK;dlkfe;sdnffaois;kfnd;asieoaefaefaefafafaefef
	 llesabfblebfaebfdlsakjsbldkjalksjdfbepoasjdfkjasdjjfeasdfuuepuuhfpohoaehp
	 alsdfhafepauusdpiufasibpuiuspuupuupeuhphpuuefddnfepaoffiaefaefaefefeafaef
	 aajdlkfjalsdkjfkasjjdfeoafdskjdiepoiiaosndkfnkiepooskjdljknasodipfeoasjdw
	 aseosdfjseoefbkasjf;oeifoasdnfnas;eoaspefoasdaalkjdbfssnapoeaeaefaefaefe</p>
	 <p class="para-2">ajajakjkgjnkjfgakjfgjansfjfnasjjajjasjasjfajsjgjaspusf
	 ppppppppsubgpiubpeurgurpgasnabppsmoijfpgobigjbobgajfbgiasddsfajs;sffofow
	 SDPOAF[OIPUBosadofiiaosrubgg[oi[oisif[oiw[oifauiuasbaosbogabofbauuspfoad
	 asbsdjfhfpsdjfnepoiPONEFIDOIEPOIFND;AOJPOIFAaflablfboebfiaboebfoaibpeiub
	 ASDN;FJJSFDNFFEI;LKDFK;I;EIK;dlkfe;sdnffaois;kfnd;asieoKEFBAHEBFOABSOEFB
	 llesabfblebfaebfdlsakjsbldkjalksjdfbepoasjdfkjasdjjfeasdfuuepuuhfpohoaeh
	...

CSS

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

header {
	position: fixed;
	z-index: 100;
	width: 100%;
	background-color: orange;
	max-width: 100%;
	padding: 1px;
	margin: auto;
	top: 0;
	}

.main-title{
	float: left;
	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;
}
.para-1 {
	margin: 2.5%;
	width: 45%;
	float: left;
}

.para-2 {
	width: 45%;
	margin: 2.5%;
	float: right;
}

footer {
	height: 20px;
	max-width: 100%;
	padding: 0;
	margin: auto;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

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