JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

  <div class="container">
      
    <div class="page-content">
<h2>Skills <small><a href="#toggle_edit_skills" id="toggle_edit_skills" class="glyphicon glyphicon-pencil">Edit</a></small></h2>

<table class="table table-hover" id="skill_list">
  
    <tr>
      <td>
        Still
        
      </td>
    </tr>
  
    <tr>
      <td>
        Works?
        
      </td>
    </tr>
  
</table>

<p>
  <a class="btn btn-success btn-lg" id="save_skill_order">Save Skill Order</a>
</p>

<form action="/update_skill/" id="save_skill_order_form" method="POST"><input type='hidden' name='csrfmiddlewaretoken' value='2E14LrineRDiIu2gdp1jHyEXO4PCnxbc' />
  <input type="hidden" id="skill_order_ids" name="skill_order_ids">
</form>

<table class="table table-hover" id="edit_skill_forms">
    
      <tr>
        <form action="/update_skill/" method="POST" id="form_to_submit_1"><input type='hidden' name='csrfmiddlewaretoken' value='2E14LrineRDiIu2gdp1jHyEXO4PCnxbc' />
          <input type="hidden" value="4" name="edit_skill_id">
          <td class="handle"><span class="glyphicon glyphicon-move"></span></td>
          <td><input id="id_skill_1" value="Still" name="skill" max_length="255"></td>
          <td><input class="btn btn-sm btn-info" id="save_skill_1" name="save_skill" value="Save" type="submit"></td>
          <td><a class="btn btn-sm btn-danger" id="del_skill_1" data-toggle="modal" data-target="#delete_skill_modal_1">Delete</a></td>
        </form>
      </tr>
    
      <tr>
        <form action="/update_skill/" method="POST" id="form_to_submit_2"><input type='hidden' name='csrfmiddlewaretoken' value='2E14LrineRDiIu2gdp1jHyEXO4PCnxbc' />
          <input type="hidden" value="3" name="edit_skill_id">
          <td class="handle"><span class="glyphicon glyphicon-move"></span></td>
          <td><input id="id_skill_2"...

CSS

.error {
    color: #D8000C;
}
.required {
    font-weight: bold;
}
body {
    padding-top: 0px;
}
@media (max-width: 979px) {
    body {
        padding-top: 0px;
    }
}
.page-content {
    padding: 60px 15px;
    text-align: center;
}
.breadcrumb {
    bottom:0px!important;
}
h1 {
    margin-top: 0px;
}
.editable:hover {
    background-color: yellow;
}
a.clickable {
    cursor: pointer;
    cursor: hand;
}
/*
 * Footer
 *
 * Separated section of content at the bottom of all pages, save the homepage.
 */
 .footer-links {
    padding-top: 40px;
    padding-bottom: 30px;
    margin-top: 100px;
    color: #777;
    border-top: 1px solid #e5e5e5;
    text-align: center;
    padding-left: 0;
}
.footer-links li {
    display: inline;
    padding: 0 2px;
}
.footer-links li:first-child {
    padding-left: 0;
}
#skill_form {
    display: none;
}
#description_form {
    display: none;
}
#education_form {
    display: none;
}
#experience_form {
    display: none;
}
#user_wrapper {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}
#user_form {
    display: none;
}
#avatar {
    float: left;
}
#user_info_wrapper {
    float: left;
}
#avatar_placeholder {
    height: 140px;
    border: 2px solid;
    overflow: hidden;
    max-width: 200px;
}
#edit_skill_forms {
    display: none;
}
#save_skill_order {
    display: none;
}
.handle {
    cursor:move;
}

JavaScript

$(document).ready(function () {
    $(".editable").attr("data-toggle", "tooltip");
    $(".editable").attr("title", "Double Click to Edit");
});

$(document).ready(function () {
    $('.page-header button').click(function () {
        $('.page-header').remove();
    });
});

/* Avatar */
$("#save_avatar_form").click(function () {
    $("#avatar_form").submit();
});

$("#edit_user").click(function () {
    $('#user_info').hide();
    $('#user_form').show();
});

/* Cancel User Form */
$("#cancel_changes").click(function () {
    /* Set all form values back to original text */
    $("#id_first_name").val($("#first_name").text());
    $("#id_last_name").val($("#last_name").text());
    $("#id_email").val($("#email").text());
    $("#id_city").val($("#city").text());
    $('#user_form').hide();
    $("#user_info").show();
});

/* $('#user_form').validate(); */

/* Description */
$("#edit_description").click(function () {
    $("#description_form").show();
    $('#description').hide();
});

$("#cancel_description").click(function () {
    $("#description_form").hide();
    if ($("#description").text() == '') {
        $("#add_description").show();
    } else {
        $("#description").show();
        $("#edit_description").show();
    }

    $("#id_description").val($("#description").text());
});

/* Add Education */
$("#toggle_education_form").click(function () {
    $("#education_form").toggle("slow", function () {
        if ($(this).is(":visible")) {
            $('#toggle_education_form').text('Hide Education Form');
        } else {
            $('#toggle_education_form').text('+ Add Education');
        }
    });
});

$('#education_form').validate();

/* Limit End Year options based on Start Year Selection */
$('#id_start_year').change(function () {
    console.log('here');
    end_year = $('#id_end_year');
    current_year = $('#id_end_year option:first').val();
    end_year.empty();
    for (var i = parseInt(current_year, 10); i >= parseInt($(this).val(),...