JSFiddle - React, Tailwind, and code Playground

by Jools Chadwick

HTML

<div id="outer">
        <div id="focusable" tabindex="-1">
            <div id="text">Click me</div>
        </div>
    </div>

CSS

#outer{
  background: SkyBlue;
  height:200px;
  width: 200px;
}
#focusable{
  background: PaleGreen;
  height: 100px;
  width: 100px;
  border:5px solid PaleGreen;
}
#focusable:focus{
  border-color: Crimson;
}
#text{
  background: AntiqueWhite;
  width:70px;
}

JavaScript

document.getElementById('text').onmousedown=function(){
   this.textContent = 'Click me';
}