JSFiddle - React, Tailwind, and code Playground

by Rajesh Dixit

HTML

<div id="test">Test<br/>
  <span id="lblTT">Span</span><br/>
  <div id="divTT">Div</div>
  <input type="text" id="txtTT" class="label" value="Text" readonly>
</div>
<button onclick="focusSpan()">Focus Span</button>
<button onclick="focusDiv()">Focus Div</button>
<button onclick="focusText()">Focus Text</button>

CSS

div:focus{
  background:blue;
}
span:focus{
  background:blue;
}
input:focus{
  background:blue;
  font-size:20px;
  font-family:Gorgia;
  color:#eee;
}

.label{
  border:0px;
}

JavaScript

function focusDiv(){
	document.getElementById("divTT").focus();
}

function focusSpan(){
	document.getElementById("lblTT").focus();
}

function focusText(){
	document.getElementById("txtTT").focus();
}