JSFiddle - React, Tailwind, and code Playground

by mpsingh2003

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
  <a href="#">one</a>
  <a href="#">two</a>
  <a href="#">three</a>
</div>

CSS

.wrapper {
  margin-top: 50px;
  display: flex;

  
}
a {
    border: 1px solid red;
    padding: 20px;
    margin-right: 10px;
  }

.no-outline {
  outline: 0 !important;
}

.no-outline:focus {
  outline: 0 !important;
}

.no-outline:hover {
  outline: 0 !important;
}

.no-outline:active {
  outline: 0 !important;
}

.custom-outline:focus {
  outline: 2px dotted blue !important;
}

JavaScript

// This function sets outline on tab and removes it on click
var elArr = Array.from
  ? Array.from(document.querySelectorAll("a"))
  : Array.prototype.slice.call(document.querySelectorAll("a")); // Fallback for IE because as usual nothing works there!

elArr.forEach(function(a) {
  return a.addEventListener("click", function() {
    $(a).removeClass("custom-outline")
      .addClass("no-outline");      
  });
});

elArr.forEach(function(a) {
  return a.addEventListener("focus", function() {
    $(a).removeClass("no-outline")
      .addClass("custom-outline");
  });
});
// END