JSFiddle - React, Tailwind, and code Playground

HTML

<form class="xyz" action="">
 
<div><input id="name" name="name" required="required" type="text" /><label for="name"
prompt="Vorname und Familienname">NAME</label></div>
 
<div><input id="email" name="email" required="required" type="text" /><label for="email"
prompt="Bitte geben Sie hier Ihre eMail-Adresse ein">EMAIL</label></div>
 
<div><textarea id="comment" name="comment" required="required"></textarea>
<label id="com" for="comment">NACHRICHT</label></div>
 
<input class="submit" value=" NACHRICHT ABSCHICKEN " type="submit" /></form>

CSS

form.xyz {padding:0; margin:40px 0; width:500px}
form.xyz .submit {float:right; margin-right:6px; padding:8px 8px; cursor:pointer;
font:normal 13px verdana, sans-serif; background:#eee; border:2px solid #75736e}
form.xyz .submit:hover {background:#fff}
form.xyz div {position:relative; margin:5px 0}
form.xyz label {float:left; display:block; width:100px; font:normal 13px/25px verdana,
sans-serif; color:#222; text-align:right; padding-right:10px}
form.xyz label:after {display:block; text-align:left; content:attr(prompt); position:absolute;
left:120px; top:0; z-index:10; font:normal 13px/25px verdana, sans-serif; color:#888}
 
form.xyz input:focus + label:after, form.xyz textarea:focus + label:after,
form input:valid + label:after, form textarea:valid +label:after {display:none}
 
form.xyz textarea,
form.xyz div input {width:360px; padding:5px 10px; border:2px solid #75736e;
font:normal 13px/25px verdana}
form.xyz textarea {height:150px}
form.xyz div input {height:13px}
 
label#com {margin-top:7px}
label#com:after {margin-top:7px}
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
form.xyz .submit {padding:9px 8px; margin-top:-4px}
}
/* Chrome Hacks at work */