JSFiddle - React, Tailwind, and code Playground

HTML

<div class="username">
        <input name="txtFullName" id="txtFullName" type="text" class="user" value="Username" onBlur="if(this.value=='') this.value='Username'" onFocus="if(this.value =='Username' ) this.value=''"  />
      </div>

CSS

.username input{
    background-color: #FFFFFF; 
    border: 2px solid #DDDDDD;
    border-radius:5px;            
    color: #9E9E9E;
    height: 30px; 
    height: 22px\0/; 
    width: 330px; 
    padding:0px 10px 0px 10px; 
    padding:8px 10px 0px 10px\0/;  
    margin:15px 0px 0px 0px;
    vertical-align:middle;
}
:root .username input{
    height: 30px\9;
    padding:0px 10px 0px 10px\9;
}