JSFiddle - React, Tailwind, and code Playground
HTML
<a class="button">click</a>
<div id="fired"></div>
CSS
a {
position: relative;
z-index: 10;
cursor: pointer;
display: inline-block;
vertical-align: top;
text-align: center;
margin: 0;
padding: 0;
width: 160px;
height: 160px;
line-height: 80px;
font-size: 24px;
background: blue;
color: #fff;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
a:active {
background-color: #00202b;
height: 80px;
padding-top: 80px;
}
a:after {
position: absolute;
top: 0;
left: 0;
content: ' ';
height: 100%;
width: 100%;
}
JavaScript
var firedBox = $('#fired'),
i = 0,
button = $('.button').on('click', {}, function (event) {
firedBox.text('event fired ' + i++);
});