JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="test1" placeholder="Field 1" id="test" />
<input type="text" name="test2" placeholder="Field 2" />

<div class='some_div' tabinde='0'>
MY MAGICAL OUTLINE
</div>

CSS

.some_div{
    outline: 2px solid rgba(125,125,125,0.7);
    height: 40px;
    font-size: 22px;
    margin-top: 10px;
}
#test {
   outline: 1px solid #e25311;
}

JavaScript

$(document).ready(function() {
    $("body").on("mousedown", "*", function(e) {
        if (($(this).is(":focus") || $(this).is(e.target)) && $(this).css("outline-style") == "none") {
            $(this).css("outline", "none").on("blur", function() {
                $(this).off("blur").css("outline", "");
            });
        }
    });
});