JSFiddle - React, Tailwind, and code Playground

HTML

<title> Chemistry Technology</title>
  <body>
    <!-- Starts the code for the navigation bar -->
    <nav>
      <div id="navBar">
        <ul class="nav">
          <li><a href="../chemSite.html">Home</a></li>
          <li><a class="active" href="#">Education</a></li>
          <!--This is for mobile responsiveness if the screen is bigger than 680px
              it is set to display: none.

              If it is less than 680px it is set to display: inline-block and is positioned in the upper right corner
              of the navigation bar -->
          <li class="icon"><a href="javascript:void(0);" onclick="navFunction()" style="font-size: 15px;">&#9776;</a></li>
        </ul>
        <!-- Script for responsiveness called by the media query,
            appends another class to the nav bar so its only styled when
           the screen is <=750px -->
        <script>
          function navFunction() {
              document.getElementById("nav").className = "responsive";
            }
        </script>
        <br>
      </div>
    </nav>
    <!-- Start main content of site -->
    <div id="main">
      <div id="leftColumn">
        <h1>Education</h1>
        <h3 class="small">The best preparation is a two-year associate degree in an applied science (AAS) program designed to prepare students for a career in chemical technology.
         College offers an associate of applied science for chemical technology. This degree requires completion of a minimum of 62 credit hours.
          College prepares students with skills necessary to go immediately into the workforce. </h3>
        <br>
        <h2 class="thick">Example of Classes for AAS in<br>
          Chemical Technology</h2>
        <table>
          <tr>
            <th>Course</th>
            <th>Class</th>
            <th>Credits</th>
          </tr>
          <tr>
            <td>BIO 101</td>
            <td>Cellular Biology</td>
            <td>4</td>
          </tr>
          <tr>
           ...

CSS

/* Stylings for the navigation bar */
ul.nav{
  position: absolute;
  top: 0%;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow:hidden;
  background-color: #00a6da;
}

ul.nav li {
  width: 50%;
  float:left;
  font-family:verdana;
}
ul.nav li a {
  width: 100%;
  line-height: 30px;
  font-family:verdana;
  height: 30px;
  display: inline-block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
ul.nav li a:hover:not(.active) {
  font-family:verdana;
  background-color: #0089b3;
}
ul.nav li a.active {
  font-family:verdana;
  background-color: #0089b3;
  color: white;
  font-weight: bold;
}
ul.nav li.icon {
  display: none;
}
/* Media Query to hide all elements of the nav bar except for the Home.
   It also handles displaying the icon on the right side
   This all occurs if the screen is <=680px
*/
@media screen and (max-width:750px) {
  ul.nav li:not(:first-child) {display: none;}
  ul.nav li.icon {
    float:right;
    display: inline-block;
  }
  ul.nav li.icon {
    float: right;
    display: inline-block;
  }
}

/* Media Query to handle the responsive nar bar on smaller screens */
@media screen and (max-width:750px) {
  ul.nav.responsive {position: relative;}
  ul.nav.responsive li.icon {
    position: absolute;
    right: 0;
    top:   0;
  }
  ul.nav.responsive li {
    float: none;
    display: inline;
  }
  ul.nav.responsive li a {
    display: block;
    text-align: left;
  }
}

body {
  background-color: #00a6da;
  margin: 0;
  padding: 0;
}

/* Define font stylings */
.grey {
  color: grey;
}

.italic {
  font-style: italic;
}

.thick {
   font-weight:bold;
}

.thin {
 font-weight:normal;
}
/* Main stylings for the site sets margin, width, font, and background color */
#main {
  width:80%;
  margin-left:auto;
  margin-right:auto;
  font-family: Arial, Verdana, Hevetica, sans-serif;
  background-color: white;
  margin-top: 60px;
}

/* Define Styles for the Left and Right Columns */
h1 {
 ...