JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<center><img style="width: 456px; height: 142px;"
src="wkrp_c.gif" alt="logo"></center>
<p>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; &nbsp; <big
style="font-family: Helvetica,Arial,sans-serif;"><big>&nbsp;&nbsp;
Wisnia-Kapp Reading Programs</big></big></p>
<center></center>
<a target="_blank" href="http://www.jwisnia.com/wpcms/"><img
style="border: 0px solid ; width: 32px; height: 32px;" alt=""
src="arrow-88-32.png" align="middle"></a><a
target="_blank" style="font-style: italic;"
href="http://www.jwisnia.com/wpcms/">Visit Judith
Wisnia &amp; Assoc.</a><br>
<br>
</div>
</div>
</div>
<ul id="drop-nav">
<li><a href="#">Home</a>
</li>
<li><a href="about.html">About</a>
<ul>
  <li><a href="students.html">Students</a></li>
  <li><a href="programs.html">Programs</a></li>
  <li><a href="trainings.html">Trainings</a></li>
</ul>
 </li>
 <li><a href="services.html">Services Offered</a>
 </li>
 <li><a href="products.html">Our Products</a></li>
 <li><a target="_blank"
 href="http://www.jwisnia.com/wpcms/contact-us-2/">Contact</a>
</li>
</ul>
<div id="contentwrap">
<div id="content">
<p style="font-family: Helvetica,Arial,sans-serif;"><b><span
style="text-decoration: underline;">Overview</span></b></p>
<p style="font-family: Helvetica,Arial,sans-serif;"><b>WKRP</b>&nbsp;is
a rule-governed, multisensory program that involves
phonological awareness training using storytelling and
imagery. <b style="font-family: Helvetica,Arial,sans-serif;">The
WKRP...

CSS

#drop-nav {
 width: 1000px;
 }
 #contentwrap {
 margin-top: 40px;
 }
 ul li ul li a {
 padding: 10px 0px 5px 0px;
 text-align: center;
 width: 100%;
 display: table-cell;
 }
 ul {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 list-style-image: none;
 list-style-position: outside;
 overflow: visible;
 position: static;
 }
 ul li {
 border: 1px solid #000000;
 display: inline-block;
 position: relative;
 background-color: white;
 }
 li ul {
 display: none;
 background-color: #3333ff;
 }
 ul li a {
 background: #3333ff none repeat scroll 0% 50%;
 text-decoration: none;
 white-space: nowrap;
 color: #ffffff;
 overflow: visible;
 text-align: center;
 display: block;
width: 175px;
padding: 15px 0px;
 }
 ul li a:hover {
 background: #3366ff none repeat scroll 0% 50%;
 overflow: visible;
 }
 li:hover ul {
 display: block;
 position: absolute;
    width: 174px;
 overflow: visible;
 }
 li:hover li {
 float: none;
 background-color: #3366ff;
 }
 li:hover a {
 background: #2346b1 none repeat scroll 0% 50%;
 }
 li:hover li a:hover {
 background: #40a3f6 none repeat scroll 0% 50%;
 }
 #drop-nav li ul li {
 border-top: 0px none;
 overflow: visible;
 visibility: visible;
 font-family: Arial,Helvetica,sans-serif;
 text-align: justify;
 clear: none;
 display: table;
 width: 100%;
 }
 #content {
 border-left: 1px solid gray;
 border-right: 1px hidden gray;
 padding: 1em;
 background-color: #dff4ff;
 float: left;
 width: 616px;
 }
 #rightcolumn {
 border: 9px hidden #dff4ff;
 margin: 0 0 -1pt;
 padding: 1em 1em 47px;
 float: right;
 clear: right;
 visibility: visible;
 width: 160px;
 background-color: #ffffcc;
 max-width: 600px;
 overflow: hidden;
 font-size: 8pt;
 font-weight: normal;
 font-family: Arial;
 }
 #container {
 border: 4px solid gray;
 margin: 10px auto;
 color: #333333;
 line-height: 130%;
 max-width: 900px;
 background-color: #dff4ff;
 overflow: hidden;
 }
 #footer {
 clear: both;
 background-color: #dff4ff;
 height: 56px;
 }