JSFiddle - React, Tailwind, and code Playground
HTML
<div class="input_wrap">
<input class="contact_input" autocomplete="off" name="Last Name" type="text" required>
<label>Last Name</label>
<svg class="icon adress_card"></svg>
</div>
<div class="input_wrap w-100">
<input class="contact_input" autocomplete="off" name="Email" type="email" required>
<label>Email</label>
<svg class="icon email_svg"></svg>
</div>
CSS
.focus {
outline: dashed 3px orange;
}
JavaScript
const inputs = document.querySelectorAll(".contact_input");
inputs.forEach((ipt) => {
ipt.addEventListener("focus", () => {
ipt.parentNode.classList.add("focus");
});
});