JSFiddle - React, Tailwind, and code Playground

by alfredopacino

HTML

<div>
A <a href="#" id="link1">link</a>
</div>

<div>
B <a href="#">link</a>
</div>

<button>
button
</button>

<a name="position" class="position"> MORE TEXT HERE</a>

CSS

*:focus{
  outline: none !important;;
  border-color: #000000 !important;
}
:target  {
  outline: none !important;;
  border-color: #000000 !important;
}

a:focus-within {
  font-weight: bold !important;;
  background: red !important;
}

.position:target {
color:#ff0000;
background-color:#f5f36e;
}

.position:focus-visible {
  background-color: pink; /* Something to get the user's attention */
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -1px;
}