JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <a href="" id="starthere">Start here</a>
</div>
<div>
  <a href="" id="link">Hi, I am a link</a>
</div>
<div>
  <button>Hi, I am a button</button>
<div>

CSS

body {
  font-family: sans-serif;
}
a {
  color: #3399cc;
}
a:focus {
  outline: 1px dotted #000;
}
div {
  margin: 10px 0;
  font-size:15px;
}
button {
  background: #ddd;
  padding: 4px 8px;
  color: #3399cc;
  border: 1px solid #444;
  font-size:15px;
  font-family: sans-serif;
  outline: none;
}
button:focus {
  outline: 1px dotted #000;
}
button.clicked {
  outline: none;
}

JavaScript

$('#starthere').focus();
$('button').click(function(){
	$(this).addClass('clicked');
});
$('button').focus(function(){
	$(this).removeClass('clicked');
});