JSFiddle - React, Tailwind, and code Playground

by Dave Mednick

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>[JMS] MasTec Job Management System</title>
        <meta charset="UTF-8" />
        <meta name="generator" content="Rapid PHP 2010" />
        <meta name="author" content="Dave Mednick - MASTEC" />
        <meta name="description" content="[JMS] - MasTec Job Management System - for use by MasTec employees and its representatives only." />
        <!-- begin load styling -->
        <link type="text/css" href="css/960_12_col.css" rel="stylesheet" /><!-- 960_12 grid system -->
        <link type="text/css" href="css/black-tie/jquery-ui-1.9.1.custom.css" rel="stylesheet" /><!-- jqueryUI theme -->
        <link type="text/css" href="css/jqueryFileTree.css" rel="stylesheet" /><!-- this is for the FAQ section -->
        <link type="text/css" href="css/fullcalendar/fullcalendar.css" rel="stylesheet" />
        <link type="text/css" href="css/default.css" rel="stylesheet" /><!-- custom CSS styling -->
        <!-- end load styling -->
        <!-- begin load scripts -->
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.watermark.min.js"></script>
        <script type="text/javascript" src="js/jquery.validate.js"></script>
        <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.min.js"></script>
        <script type="text/javascript" src="js/jquery.json.min.js"></script>
        <script type="text/javascript" src="js/date.format.js"></script>
        <script type="text/javascript" src="js/custom.mlg.js"></script>
        <script type="text/javascript" src="js/date.format.js"></script>
        <script type="text/javascript" src="js/jquery.ui.monthpicker.js"></script>
        <script type="text/javascript" src="js/fullcalendar/fullcalendar.js"></script>
        <!-- end load scripts -->
      ...

JavaScript

$(function() {
    var states = {
        AL: "Alabama",
        AK: "Alaska",
        AZ: "Arizona",
        AR: "Arkansas",
        CA: "California",
        CO: "Colorado",
        CT: "Connecticut",
        DE: "Delaware",
        DC: "District Of Columbia",
        FL: "Florida",
        GA: "Georgia",
        HI: "Hawaii",
        ID: "Idaho",
        IL: "Illinois",
        IN: "Indiana",
        IA: "Iowa",
        KS: "Kansas",
        KY: "Kentucky",
        LA: "Louisiana",
        ME: "Maine",
        MD: "Maryland",
        MA: "Massachusetts",
        MI: "Michigan",
        MN: "Minnesota",
        MS: "Mississippi",
        MO: "Missouri",
        MT: "Montana",
        NE: "Nebraska",
        NV: "Nevada",
        NH: "New Hampshire",
        NJ: "New Jersey",
        NM: "New Mexico",
        NY: "New York",
        NC: "North Carolina",
        ND: "North Dakota",
        OH: "Ohio",
        OK: "Oklahoma",
        OR: "Oregon",
        PA: "Pennsylvania",
        RI: "Rhode Island",
        SC: "South Carolina",
        SD: "South Dakota",
        TN: "Tennessee",
        TX: "Texas",
        UT: "Utah",
        VT: "Vermont",
        VA: "Virginia",
        WA: "Washington",
        WV: "West Virginia",
        WI: "Wisconsin",
        WY: "Wyoming"
    };
    $('#needle_jms').css('font-size', '13px').css('font-family', 'Segoe UI, Arial, Sans Serif');
    $('#range_slider').slider({
        range: true,
        animate: true,
        step: 3,
        min: 0,
        max: 180,
        values: [0, 180],
        slide: function(e, ui) {
            if (ui.values[0] == ui.values[1]) {
                return false;
            }
            $('#ageMin').val(ui.values[0]);
            $('#ageMax').val(ui.values[1]);
        }
    });
    $('#jms_search_form').hover(function() {
        $(this).css('cursor', 'pointer');
    });
    $('#do_search').click(function() {
        var needle = $('#needle_jms').val();
        $.get('ajax.searchJobs.php', {
...