JSFiddle - React, Tailwind, and code Playground

by Peter

HTML

<section id="remove-highlight-demo">
    <h1>Remove link highlight</h1>
    
    <ul class="no-bullets">
        <li><a class="example-link" href="https://www.stackoverflow.com">Outline Link</a></li>
        <li><a class="example-link no-outline-link" href="https://www.stackoverflow.com">No Outline Link</a></li>
    </ul>
</section>

CSS

#remove-highlight-demo {
    font-family: Helvetica, Arial, Sans-Serif;
}

.no-bullets {
    list-style-type: none;
}

.no-bullets li {
    margin: 1em 0;
}

/* This is the important part for your problem */

.no-outline-link:focus {
    outline: none;
}

/* If you also want to stop the colour changing to red */

.no-outline-link:active {
    color: blue; 
}

JavaScript

$(document).ready(function () {
    $('.example-link').on('click', function (event) {
        this.focus();
        event.preventDefault();
    });
});