JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin:10px">
<input type="text" value="Username" class="textbox3" onfocus="if(this.value=='Username')this.value=''" onblur="if(this.value=='')this.value='Username'">
</div>

CSS

.textbox3{
    color:#202020;
    padding:0 5px 0 10px;
    font-family: 'Source Sans Pro', sans-serif;
    height:30px;
    font-size:13px;
    margin:0;
    outline:none;
    border:1px solid #dbdbdb;
    border-radius:3px;
    width: 150px;
}
.textbox3:focus{
    color:#202020;
    border:1px solid #4e8abf;
}
.textbox3:focus, .textbox3{
 -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}