JSFiddle - React, Tailwind, and code Playground

HTML

<div id="debug"></div>
<div id="myButton">CLICK ME</div>

CSS

#myButton {
	position:absolute;
	top:100px;
	left:100px;
	width:80px;
	height:80px;
	background-color:#ddd;
	border-top:10px solid #f00;
	border-left:10px solid #f00;
	font-family:Arial;
	cursor:pointer;
}
#myButton:active {
	margin:10px 0 0 10px;
}

JavaScript

$(document).ready(function() {
	$('#myButton').click(function(e) { e.preventDefault(); debug('click') });
	$('#myButton').mousedown(function() { debug('button down'); });
	$('#myButton').mouseup(function() { debug('button up'); });
});

function debug(msg) {
	$('#debug').append('[' + msg + ']');
}