JSFiddle - React, Tailwind, and code Playground

HTML

<div class="defocus">.::.:.:.::.</div>
<div class="defocus">:..:.:.:..:</div>
<div class="defocus">.::.:.:.::.</div>

CSS

div {
    font:3em monospace;
    -webkit-user-select:none;
    user-select:none;
    cursor:pointer;
    text-align:center;
}
div:active {
    color:lightcoral;
}

JavaScript

(function () {
    window.addEventListener("load", function () {
        var seconds = 0.15 * 1000;
        var defocused = document.getElementsByClassName("defocus");
        for (var i = 0, l = defocused.length; i < l; i++) {
            var el = defocused[i];
            el.style.outline = 0; //optional
            el.setAttribute("tabindex", -1);
            el.addEventListener("mousedown", blur);
        }

        function blur(e) {
            var el = e.target;
            setTimeout(function (el) {
                el.blur();
            }, seconds, el);
        }
    });
})();