JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div class="wrapper">
    <input type="text" />
    <div class="input-border"></div>
</div>

CSS

.wrapper {
    display: inline-block;
    position:relative;
}
.input-border {
    position: absolute;
    left: -10px;
    right: -10px;
    top: -10px;
    bottom: -10px;
    background: red;
    z-index: 1;
}
input {
    position: relative;
    z-index: 2;
}
input:focus ~ .input-border {background:#444;}