JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<body>
  <h2>jQuery UI-Survey</h2>
  <h3>General Information</h3>
  <div id="name_input">
    <label for="name">Name:</label>
    <input type="text" id="name">
  </div>
  <div id="date_input">
    <label for="date">Date:</label>
    <input type="text" id="date">
  </div>
  <div id="year_input">
    <h3>Are you enrolled as an undergraduate or a graduate?</h3>

    <!-- Comment out this part of the form after Step 2 -->
    <input type="radio" name="enroll_year" id="ugrad" value="ugrad">
    <label for="ugrad">Undergraduate (taking 6.813)</label><br>
    <input type="radio" name="enroll_year" id="grad" value="grad">
    <label for="grad">Graduate (taking 6.831)</label>

    <!-- Step 2: Your HTML here -->
  </div>

  <div id="color_input">
    <!-- Comment out instruction when you finish step 3 -->
    <h3>Rank the colors listed from your most favorite (1)
      to your least favorite (5). Be sure to only use each ranking once.</h3>
    <!-- Comment this part of the form out after step 3 -->
    <input type="text" class="rank_color" id="red">
    <label for="red">#ff0000</label><br/>
    <input type="text" class="rank_color" id="blue">
    <label for="blue">#0000ff</label><br/>
    <input type="text" class="rank_color" id="hot_pink">
    <label for="hot_pink">#ff00b3</label><br/>
    <input type="text" class="rank_color" id="mustard">
    <label for="mustard">#ded447</label><br/>
    <input type="text" class="rank_color" id="dark_green">
    <label for="dark_green">#125e18</label><br/>

    <!-- Step 3: Your HTML here -->
    <!-- Uncomment instruction when you finish step 3 -->
    <!--
<h3>Rank the colors from your most favorite to...

CSS

body {
  margin: 20px;
}
#name_input {
  float: left;
  margin-bottom: 20px;
  margin-right: 20px;
}
#date_input {
  float: left;
  margin-bottom: 20px;
}
#year_input {
  clear:both;
}
.rank_color {
  width: 20px;
  margin-top: 2px;
}

/* Step 2: Your CSS code goes here */

/* Step 3: Your CSS code goes here */

/* Step 4: Your CSS code goes here */

JavaScript

/* INSTRUCTIONS
We want to use jQuery UI widgets for dates, choices, and dragging.
You will need to:
1. Add Datepicker for selecting dates.
2. Use the Selectable interaction for selecting year.
3. Use the Sortable widget to allow draggable color rankings.
4. Use the Tooltip widget to add extra information to year/color options
*/

$(document).ready(function() {

  /* Step 1: Your code goes here */

  /* Step 2: Your js code goes here */

  /* Step 3: Your js code goes here */

  /* Step 4: Your js code goes here */

});