JSFiddle - React, Tailwind, and code Playground

HTML

<div>HTML4</div>

<label for="name">Name</label>    
<input type="text" name="name" value="Enter your full name"  onfocus="if(this.value=='Enter your full name') {this.value='', this.style.color='#999'};" onblur="if(this.value=='') {this.value='Enter your full name', this.style.color='#555';}" />


<label for="comment">Comment</label> 
<textarea name="comment" rows="10" cols="70" value="Enter your full name"  onfocus="if(this.value=='Enter your comment') {this.value='', this.style.color='#999'};" onblur="if(this.value=='') {this.value='Enter your comment', this.style.color='#555';}">Enter your comment</textarea>


<div>HTML5</div>

<label for="name2">Name</label>
<input type="text" name="name2" placeholder="Enter your full name" />
<label for="comment2">Comment</label>
<textarea name="comment2" placeholder="Enter your comment" rows="10" cols="70"></textarea>

CSS

body {
    font-family: Arial;
    background: #3f3f40;
    padding: 30px;
}

div {
    margin: 20px 0;
    color: #FFF;
}

:focus {
    outline: 0;
}

label {
    display: block;
    color: #999;
    margin: 20px 0 10px;
}

input[type="text"], textarea {
    width: 300px;
    padding: 7px 10px;
    font-size: 14px;
    background: #333;
    border: 1px solid #1A1A1A;
    color: #555;
}

input[type="text"]:focus, textarea:focus {
    border: 1px solid #EB1B23;
}

::-webkit-input-placeholder  { color:#555; } /* Webkit */
:-moz-placeholder { color:#555; }  /* Firefox <= 18 */
::-moz-placeholder { color:#555; }  /* Firefox >= 19 */
:-ms-input-placeholder {  color: #555; } /* Internet Explorer */