JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">Link A1 (Link with just text, default focus outline)</a>
<br />
<a href="#" class="custom-focus">Link A2 (Link with just text, custom focus outline)</a>
<br />
<a href="#">
	<div>Link B1(Link with div inside, default focus outline)</div>
</a>
<br />
<a href="#" class="custom-focus">
	<div>Link B2(Link with div inside, custom focus outline)</div>
</a>

CSS

.custom-focus:focus {
	outline: #fa0 solid 2px;
}