JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/branches/labs/spinner/themes/base/ui.all.css">
<script src="http://jquery-ui.googlecode.com/svn/branches/labs/spinner/external/mousewheel/jquery.mousewheel.min.js"></script>
<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/branches/labs/spinner/demos/demos.css">
<script src="http://jquery-ui.googlecode.com/svn/branches/labs/spinner/ui/ui.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/branches/labs/spinner/ui/ui.spinner.js"></script>
<div class="demo">

<p>
    <label for="amount">Set the time (hh:mm:ss:fr):</label>
    <input class="time hour" name="hour" value="0" />
    <input class="time min" name="min" value="0" />
    <input class="time sec" name="sec" value="0" />
    <input class="time frames" name="frames" value="0" />

</p>
</div>

CSS

label { font-size: 14px; }

JavaScript

$(function() {
        $(".time").spinner({
            min: 0,
            max: 59,
            step: 1,
            start: 0,
            precision: 0,
            width: '2em'
        });    
      $(".hour").spinner('option','max', 23);
      $(".frames").spinner('option', 'max', 100);
    });