JSFiddle - React, Tailwind, and code Playground

by Jonathan Sampson

HTML

<div class="myButton">
    <h2>Text</h2>
    <h3>Some more text</h3>
</div>

CSS

.myButton {
    cursor:pointer;
    background-color: #fff;
    width:100px;
    height:100px;
    boborder-width: 1px;
    border-style: solid;
}
.myButton.active {
    background-color: #f00;
    -ms-transition-duration: 0.2s;
    -ms-transform: scale(0.95);
    -webkit-transition-duration: 0.2s;
    -webkit-transform: scale(0.95);
    -moz-transition-duration: 0.2s;
    -moz-transform: scale(0.95);
    -o-transition-duration: 0.2s;
    -o-transform: scale(0.95);
}

JavaScript

$(".myButton").on("mousedown mouseup", function(e){
    $(this).toggleClass("active", e.type === "mousedown");
});