JSFiddle - React, Tailwind, and code Playground

by thai

HTML

<input type="text" value="abdefg">
<div id="status"></div>

CSS

input {
    font-size: 60px;
    text-shadow: 0 5px 20px red;
    background: white;
    border: 30px solid #789abc;
    color: black;
    margin-bottom: 40px;
}

#status {
    padding-left: 40px;
    font-size: 30px;
    -moz-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    -transform: rotate(4deg);
}

JavaScript

var setStatus = (function() {
    var times = 1;
    var last = undefined;
    return function(x) {
        if (last === x) {
            times ++;
        }
        last = x;
        $("#status").html(x + (times > 1 ? " x" + times : ""));
    };
})();


$("input").bind('drag', function() {
   setStatus("Drag!!");
});

setStatus("Event handler set");