JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="flex m-2">
  <button class="btn btn-primary">Ordinary button styling</button>
  <button class="btn btn-primary btn-focus-visible">Button with :focus-visible</button>
</div>

CSS

body {
  padding: 2rem;
}
.flex {
  display: flex;
  gap: 2rem;
}
.btn:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.btn-focus-visible:focus-visible {
  outline: 3px solid fuchsia;
  outline-offset: 4px;
  
}