JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<main>
  <h1>Try focusing on any of the input fields below</h1>
  <form>
    <div>
      <label>Name: </label>
      <input />
    </div>
    <div>
      <label>Email: </label>
      <input />
    </div>
    <div>
      <label>Message: </label>
      <textarea></textarea>
    </div>
    <div>
      <button>Send</button>
    </div>
  </form>
</main>

CSS

form {
    padding: 10px;
    border-radius: 2px;
}
form:focus-within {
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.8);
    padding: 10px;
}