JSFiddle - React, Tailwind, and code Playground

by cvoll

HTML

<div class="modal focusable" tabindex="0">
Modal! Try clicking the white background.

<button class="button focusable">
  Submit
</button>
</div>

CSS

body {
  background: #202731;
  font-family: Gilroy, Proxima Nova, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.focusable {
  box-shadow: 0 0 0 0 rgba(75, 186, 251, 0);
  transition: 0.1s;
}

.focusable:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(75, 186, 251, 0.7);
}

.modal {
  margin: 30px auto;
  background: #FFF;
  border-radius: 10px;
  padding: 30px;
  width: 200px;
}

.button {
  background: #1573e6;
  border-radius: 8px;
  -webkit-appearance: none;
  border: 0;
  padding: 10px 20px;
  width: 100%;
  color: #FFF;
  font: inherit;
  margin-top: 15px;
  cursor: pointer;
}