JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="http://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/js/vendor/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="http://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/jquery.timepicker.css">
<link rel="stylesheet" href="http://www.courts.mo.gov/civiceducation/html5bp/html5-boilerplate-4.3.0/css/jquery-ui.css">
Field 1::
<input type="text" name="textfield" size="25" value="" autofocus>Field 2::
<input type="text" name="textfield" size="25" value="">
<br>
<br>
<br>time slot::
<input type="text" id="presentationTime" name="presentationTime" size="10" value="" placeholder="HH:mm A"><span id="errormsg">Valid Time required!</span>

<br>
<br>
<br>Filed 4::
<input id="field" type="text" name="textfield" size="25" value="">Field 5::
<input type="text" name="textfield" size="25" value="">
<br>

CSS

#errormsg {
            display:none;
            margin-left: 15px;
            color:red;
        }
        .ui-timepicker-list li.ui-timepicker-disabled {
            /*display: none;*/
            font-weight: normal;
            font-size: 12px;
        }

JavaScript

$(document).ready(function () {
    // this is used just to highlight where the current focus is on...
    $("input").focus(function () {
        $(this).css('background-color', 'rgba(240, 116, 116, 0.69)');
    });

    $("input").blur(function () {
        $(this).css('background-color', '#fff');
    });

    // timepicker plugin courtesy of--  http://jonthornton.github.io/jquery-timepicker/
    $('#presentationTime').timepicker({
        'scrollDefault': '08:30 AM',
            'disableTimeRanges': [
            ['8:01pm', '11:59pm'],
            ['12am', '7:59am']
        ],
            'timeFormat': 'h:i A',
            'selectOnBlur': true
    }).on('timeFormatError', function () {
        if ($('#presentationTime').val() != null || $('#presentationTime').val() != "") {
            $("#errormsg").css("display", "inline").fadeOut(4000);
        }
        $('#presentationTime').val("");
        $('#presentationTime').focus();
    }).on('timeRangeError', function () {
        if ($('#presentationTime').val() != null || $('#presentationTime').val() != "") {
            $("#errormsg").css("display", "inline").fadeOut(4000);
        }
        $('#presentationTime').val("");
        $('#presentationTime').focus();
    });
    // end timepicker function

    $("#field").blur(function () {
        if ($('#field').val() != "12345") {
            $("#field").css('outline', 'green dotted thick');
            $('#field').val("");
            $('#field').focus();
            setTimeout(function() { $('#field').focus(); }, 50);
        }
    });


});