JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<input type="text" value="test">
<hr>
<button>
Some button
</button>
<hr>
<div class="notification">
  Notification
  <div class="messageCloseButton" tabIndex=0>X</div>
</div>
<hr>

CSS

button:focus {
  box-shadow: 0 0 1px -moz-mac-focusring inset,
              0 0 4px 1px -moz-mac-focusring,
              0 0 1.5px 1px -moz-mac-focusring;
}

.messageCloseButton {
  -moz-appearance: none;
  padding: 0;
  margin: 0 2px;
  border: none;
}

.messageCloseButton {
  border-radius: 10000px;
  box-shadow: 0 0 2px 1px -moz-mac-focusring,
              0 0 0 2px -moz-mac-focusring inset;
}

JavaScript

document.querySelector("button").focus();
console.log('placed focus');