JSFiddle - React, Tailwind, and code Playground

HTML

<div class="name_input">
    <input id="first_name" name="first_name" type="text" size="25" placeholder="First Name"
            onfocus="if (this.value == 'First') { this.value = ''; this.style.color = '#000000'; } " 
            onblur="if (this.value == '') { this.value = 'First'; this.style.color = '#909090'; } " 
            value="First"/>

    <input id="last_name" name="last_name" type="text" size="25" placeholder="Last Name"
            onfocus="if (this.value == 'Last') { this.value = ''; this.style.color = '#000000'; } " 
            onblur="if (this.value == '') { this.value = 'Last'; this.style.color = '#909090'; } " 
            value="Last"/>
</div>

CSS

.first-name {
    position:relative;
}
.first-name-input-value {
    position:absolute;
    top:2px;
    left:5px;
}

input{width:100px;margin-top:10px;display:block;}