JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<button class="btn btn1">
button1
</button>
<button class="btn btn2">
button2
</button>
<button class="btn btn3">
button3
</button>
</div>
CSS
.btn {
}
.btn:focus:not(:active):not(:hover):not(:hover) {
outline: 1px solid red;
}
.btn:active,
.btn:not(:hover),
.btn:not(:focus) {
outline: none;
}