JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://projectbs.github.io/bsJS/bsjs.0.5.js"></script>
<h1>Ease Visualizer</h1>

<div id="example"></div>
<div id="option" style="clear:both">
    <div class="align-left cols">duration
        <br/>
        <input type="text" size="1" value="2" id="duration" />
    </div>
    <div class="align-left cols">ease
        <br/>
        <select size="1" id="ease">
            <option value="linear">linear</option>
            <option value="backIn">backIn</option>
            <option value="backOut">backOut</option>
            <option value="backInOut">backInOut</option>
            <option value="sineIn">sineIn</option>
            <option value="sineOut">sineOut</option>
            <option value="sineInOut">sineInOut</option>
            <option value="circleIn">circleIn</option>
            <option value="circleOut">circleOut</option>
            <option value="circleInOut">circleInOut</option>
            <option value="quadraticIn">quadraticIn</option>
            <option value="quadraticOut">quadraticOut</option>
        </select>
    </div>
</div>

CSS

body {
    font-family:Roboto;
    color:#333;
}
.align-left {
    float:left;
}
.cols {
    font-size:9pt;
    margin-right:20px;
}
#example {
    margin-bottom:15px;
}

JavaScript

bs(function () {
    var onClick, BAR;
    BAR = 340;

    /*
     * Event handler
     */
    onClick = function () {
        console.log('time : ' + bs.Dom('#duration').S('@value') +
            ", ease : " + bs.Dom('#ease').S('@value'));
        bs.ANI.stop();
        bs.Dom('#slider').S('left', 0);
        bs.ANI.style(bs.Dom('#slider'),
            'left', BAR,
            'time', bs.Dom('#duration').S('@value'),
            'ease', bs.Dom('#ease').S('@value'));
    };
    /*
     * Style
     */
    bs.Css('h1').S('style', 'font-size:24pt;font-weight:100;color:#616161;');
    bs.Css('.bsUI_button').S('width', 110, 'height', 40, 'float', 'left',
        'background-color', '#5677fc', 'color', '#FFF', 'line-height', 40,
        'text-align', 'center', 'border-radius', 3,
        'font-size', '10pt', 'font-weight', 'bold');
    bs.Css('.bsUI_bar').S('width', BAR, 'height', 2, 'background-color', '#e0e0e0',
        'float', 'left', 'margin-top', 18, 'margin-left', 20, 'position', 'relative');
    bs.Css('.bsUI_slider').S('width', 20, 'height', 20, 'background-color', '#ff4081',
        'border-radius', 30, 'margin-top', -10, 'position', 'absolute');
    /*
     * DOM
     */
    bs.Dom('#example').S('>', bs.Dom('<div class="bsUI_button">START</div>').S('click', onClick, 'this'));
    bs.Dom('#example').S('>', bs.Dom('<div class="bsUI_bar"></div>').S('this'));
    bs.Dom('.bsUI_bar').S('>', bs.Dom('<div class="bsUI_slider" id="slider"></div>').S('left', 0, 'this'));
    bs.Dom('<div></div>').S('<', '#example', 'clear', 'both');

});