JSFiddle - React, Tailwind, and code Playground

by eykanal

HTML

<div id='bob'>
    
</div>

CSS

#bob {
    border: 1px solid #cccccc;
    background: #eeeeee;
    height: 100px;
    width: 150px;
    font: 12px/1 Arial;
    text-align: center;
    padding-top: 50px;
}

JavaScript

var d = new Date;

$('#bob').mousedown(function() {
    
    $(this).text('franks!');
    
    a = d.getTime();
});

$('#bob').mouseup(function() {
    b = d.getTime();
    
    if (b-a > 500) {
        this.text('pickles!');
    }
});