JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<div class="input">
  <input type="text">
</div>

CSS

.input{
  display: inline-block;
  position: relative;
}

.input::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.input input {
  border-style: solid;
  border-color: rgba(125,125,125,1);
}

.input:hover input, .input:focus-within input {
  border-color: rgba(125,125,125,0.5);
  outline: none;
}

/* .input:hover::after, .input:focus-within::after {
  background-color: rgba(0,0,0,0.1)
} */