JSFiddle - React, Tailwind, and code Playground

by leiperte

HTML

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
 
<nav>
<link rel = "stylesheet"
   type = "text/css"
   href = "planner.css"/>
    <ul>
    <li> 
    <a href="index.html">Home</a>
    </li>
    </ul>


  <div id="main_contact">
       
 <br> 
<br>     

<h1>BS Information Technology Quick Planner
<span class="tooltiptext" >
  This quick planner is designed to allow students to easily and quickly determine what courses they 
  need for their program of study.
  <br> &#8592;&#8592;&#8592;&#8592;&#8592;&#8592;&#8592; Drag courses left if you have taken them. 
  <br/>Drag courses courses right to create a schedule. &#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;&#8594;
  <br/> To print results - click <b style="color:red">What Can I Take</b> and click the Print button.
</span></h1>
<h2>This quick planner is designed to allow students to easily and quickly determine what courses they 
  need for their program of study.</h2>
<br/>
<br/>
     
<div id=wholeTable>
<div style="clear:left;">
  <div class="greenbox">
    Green courses are Draggable indicating pre-requisites are met
    <span class="tooltiptext">If you have met the pre-requisite by taking 
an equivalent class you should drag the associated class into the 
Completed column.</span>
  </div>
  <div class="yellowbox">
    Yellow courses mean pre-requisites are not met.
  </div>
  <div class="whitebox">
    <input type="button" value="What Can I Take?" id="allAvailable" class="button" />
    <input type="button" value="Undo" id = "undo" class="button" />
  </div>
</div>
<br/>
<br/>
<div style="clear:left">
  <table>
    <tr>
      <th>Drag Completed Courses Here</th>
      <th>All Courses</th>
      <th>Drag Semester Plan</th>

    </tr>
    <tr>
      <td valign="top">
        <div...