JSFiddle - React, Tailwind, and code Playground
HTML
<div id="output"></div>
CSS
div#output {
background-color: #AAA;
width: 200px;
height: 50px;
text-align: center;
font-size: 40px;
}
div#output.ctrlKey {
background-color: #0F0;
}
div#output.noCtrlKey {
background-color: #F00;
}
JavaScript
var o = document.getElementById('output');
o.addEventListener('click', function(e) {
this.innerHTML = e.ctrlKey;
if (e.ctrlKey)
this.className = 'ctrlKey';
else
this.className = 'noCtrlKey';
});
document.addEventListener('keyup', function(e) {
if (e.key.toLowerCase() == 'arrowright')
{
o.click(e);
return false;
}
});