JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset onclick="this.setAttribute('class', 'active')">
    <input type="text" name="name" onblur="this.parentElement.classList.remove('active')">
    <input type="text" name="surname" onblur="this.parentElement.classList.remove('active')">
    <input type="text" name="age" onblur="this.parentElement.classList.remove('active')">
</fieldset>

CSS

fieldset {
    border: 3px solid #434343;
    background-color: #dcdcdc;
    transition: all 0.3s ease-in-out;
}

fieldset:hover,
fieldset.active {
    border-color: rgba(254, 70, 83, 1);
    background-color: rgba(254, 70, 83, 0.3);
}

input {
    width: 90%;
    padding: 10px;
    border: 3px solid white;
}