JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><a href="home.html">Home</a></li>
  <li class="dropdown">
    <a class="active dropbtn" href="javascript:void(0)">Capacity Study</a>
    <div class="dropdown-content">
      <a href="mainFrame.html">Conduct Study</a>
      <a href="report.html">Reports</a>
    </div>
  </li>
  <li><a href="contact.html">Contact</a></li>
</ul>
<div class="txt">
  <table>
    <tr>
      <td>
        <p2>Choose a Product : </p2>

        <select id="product">

          <!--Setting the 'NONE' value for the drop down menu list option when user do not want to choose any value. optgroup is used for the subtitles off the main product dept.-->
          <optgroup label="DEFAULT">
            <option value="NONE">NONE</option>
          </optgroup>

          <!--Product List for PCR Legacy-->
          <br>
          <br>
          <!--End of first drop down list-->
        </select>
        <br>
        <br>

        <p2>Choose a Profile : </p2>
        <select id="profile">

          <optgroup label="DEFAULT">
            <option value="NONE">NONE</option>
          </optgroup>
        </select>
      </td>
    </tr>
  </table>
  <br>
  <br>
  <br>

  <div class="rfloat">
    <input type="button" value="Back" onclick="goBack()" class="button button3" />
    <input type="submit" id="btngo" value="Go" class="button button2" />
  </div>

  <div class="clear"></div>
  <br>
  <br>
  <br>
</div>

<div>
  <footer>
    <p class="footp">&copy;All rights reserved.</p>
    <p class="footp">|</p>
    <p class="footp">Internal Use Only</p>
    <p class="footp">|</p>
    <p class="footp">Maintained By</p>
  </footer>
</div>

CSS

body {
  background-color: #d62929;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: whitesmoke;
  font-weight: bold;
  font-size: 18px;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 22px 30px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #c12525;
  color: white;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: whitesmoke;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 20px 20px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 15px;
}

.dropdown-content a:hover {
  background-color: #c12525;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.active {
  background-color: #d62929;
  color: white;
  font-weight: bold;
  font-size: 18px;
}

@media screen and (max-width: 600px) {
  ul li,
  ul li {
    float: none;
  }
}

@media screen and (max-width: 300px) {
  footer {
    -webkit-order: 3;
    order: 3;
  }
}

h1 {
  font-size: 40px;
  font-weight: bold;
}

h2 {
  font-size: 20px;
  font-weight: bold;
}

p2 {
  font-size: 15px;
  font-weight: bold;
}

tr,
td {
  padding: 15px;
  text-align: left;
}

table {
  margin: auto;
  border-collapse: collapse;
  width: 30%;
  table-layout: fixed;
  text-align: center;
}

tr {
  height: 200px;
  vertical-align: middle;
  text-align: left;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid black;
  width: 8%;
}

.button2:hover {
  background-color: black;
  color:...