JSFiddle - React, Tailwind, and code Playground

HTML

<p>Mouse only clickable span <span onclick="doShit();">Click Me (with a mouse)</span></p>
<p>Mouse and keyboard clickable span <span onclick="doShit();" tabindex="0" role="button" onkeypress="doKeyboardShit();">Click Me</span></p>
<p>Double-clicking mouse and keyboard button <button onclick="doShit();" onkeypress="doKeyboardShit();">Click Me</button></p>
<p>Proper mouse and keyboard button <button onclick="doShit();">Click Me</button></p>
<div role="alert" id="updates"></div>
<button onclick="doClear();" id="cleardisplay">Clear</button>

CSS

span, button {
    padding:3px;
    background-color:lightgrey;
    border-radius:5px;
    border: 1px solid black;
}

button {
    font-family:Times;
    font-size:16px;
}

button:active, span:active {
    background-color:grey;
}

JavaScript

document.getElementById('cleardisplay').style.display = 'none';

window.doShit = function () {
	document.getElementById('updates').innerHTML += ' shit was done';
    document.getElementById('cleardisplay').style.display = 'block';
};

window.doKeyboardShit = function () {
	document.getElementById('updates').innerHTML += ' keyboard shit was done';
    document.getElementById('cleardisplay').style.display = 'block';
};

window.doClear = function () {
    document.getElementById('updates').innerHTML = '';
    document.getElementById('cleardisplay').style.display = 'none';
};