JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<div class="button" role="button" tabindex="0">Button One</div>
<div class="button" role="button" tabindex="0">Button Two</div>
<div class="button" role="button" tabindex="0">Button Three</div>

CSS

.button {
    display: inline-block;
    margin: 5px;
    padding: 5px 10px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.button:active {
    background: #eee;
}

JavaScript

document.addEventListener('click', function(event) {
    var target = event.target;
    if (target.classList && target.classList.contains('button')) {
        trigger(event);
    }
});

document.addEventListener('keyup', function(event) {
    if (event.keyCode === 32) {
        var target = event.target;
        if (target.classList && target.classList.contains('button')) {
            trigger(event);
        }
    }
});

function trigger(event) {
    console.log('button triggered', event.target);
}