JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header>
   <h1 class="main-title">This Is a Test</h1>
   <nav>
    <ul>
	 <li class="main-nav home-page active"><a href="index.html">HOME</a></li>
	 <li class="main-nav">
	  <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 class="main-nav">
	  <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 class="main-nav">
	  <span> Content 3 </span>
	  <ul class="sub-nav">
	   <li><a href="page7.html">Page 7</a></li>
	   <li><a href="page1.html">Page 8</a></li>
	   <li><a href="page1.html">Page 9</a></li>
	  </ul>
	 </li>
	</ul>
   </nav>
  </header>
  <section>
   <div class="toolTip">
    <span>Hover Here</span>
    <span class="toolTipContent">This is a random tool tip</span>
   </div>
   <div class="content1">
    <p>This s a test, This s a test, This s a test, This s a test,  
	   This s a test, This s a test, This s a test, This s a test,  
	   This s a test, This s a test, This s a test, This s a test, 
	   This s a test, This s a test, This s a test, This s a test, 
	   This s a test, This s a test, This s a test, This s a test, 
	   This s a test, This s a test, This s a test, This s a test</p>
   </div>
   <div class="content2">
    <p>This s a test, This s a test, This s a test, This s a test,  
	   This s a test, This s a test, This s a test, This s a test,  
	   This s a test, This s a test, This s a test, This s a test, 
	   This s a test, This s a test, This s a test, This s a test, 
	   This s a test, This s a test, This s a test, This s a test, 
	   This s a test, This s a test, This s a test, This s a test</p>
   </div>
  </section>
  <footer>
  </footer>
 </body>

CSS

html{
	font-size: 1em;
}

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

header {
	background-image: url('../img/MountainsTestImage.jpg');
	background: cover;
	background-repeat: none;
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.main-title {
	padding: 20px;
	text-align: center;
	margin: auto;
	color: orange;
	font-size: 2.5em;
}

nav {
	color: white;
	background-color: orange;
	margin: auto;
	padding: 0;
	max-width: 100%;
}

nav li > span, nav  a {
	font-size: 1.3em;
}
nav ul {
	padding: 0;
	text-align: center;
	max-width: 100%;
	margin: auto;
}

nav li {
	border-style: solid;
	border-width: 0 1px 0 0;
	border-color: rgba(0,0,0,.1);
	list-style: none;
	max-width: 100%;
}

.main-nav:hover {
	background-color: #ffcc33;
}

nav a {
	text-decoration: none;
	color: orange;
	
}
.home-page a:visited {
	color: white;
}

nav a:visited {
 color: orange;
}

nav a, span {
	font-weight: 700;
}

.active {
	background-color: #ffcc33;
}
.main-nav {
	position: relative;
	
}

.sub-nav li:hover {
	text-shadow: 2px 2px 5px rgba(0,0,0,.4);
}

.sub-nav{
	box-shadow: 5px 5px 10px rgba(0,0,0,.1);
	z-index: 1;
	position: absolute;
	display: none;
	background-color: white;
	max-width: 100%;
}

.sub-nav li {
	max-width: 100%;
}

.sub-nav li a {
	display: block;
	max-width: 100%;
}

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

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

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


.toolTip {
    position: relative;
    text-align: center;       
    margin: auto;
    padding: 15px;
    max-width: 100%;
	z-index: 1;
}

.toolTipContent{
		background-color: rgba(0,0,0,.03);
		color: black;
	    left:0;
		right:0;
		margin: auto;
		width: 10%;
        visibility: hidden;
        position: absolute;
        z-index: 2;
		
}

.toolTip:hover .toolTipContent {
	visibility: visible;
}

.toolTip:hover > span {
	    color: rgba(0,0,0,.08);
}


@media screen and (min-width: 450px){
	nav li {
		display: inline-block;
		margin:...