JSFiddle - React, Tailwind, and code Playground

HTML

<div class="addcomment">
<div class="addformcomment">
<input type="text" id="name" name="name" value="">
</div></div>

CSS

.addformcomment{
margin-top: 20px;
margin-bottom: 20px;
display: block;
float: left;
width: 340px;
height: 40px;
line-height: 40px;
border: 1px solid #F2F2F2;
}
.addcomment input{
height: 40px;
line-height: 40px;
width: 169px;
background-color: #ffffff;
padding-left: 15px;
padding-right: 15px;
display: inline-block;
border: none;
}

.addformcomment.focused{
border: 1px solid red;      
}

JavaScript

$("input").focus(function(){
$(this).parent().addClass("focused");
});
$("input").blur(function(){
$(this).parent().removeClass("focused");
});