JSFiddle - React, Tailwind, and code Playground

HTML

<div class="login-form">
	<input type="text" name="id" id="userID" />
	<label for="userID">ID</label>
  	<br />
  	<input type="text" name="pwd" id="userPWD" />
	<label for="userPWD">Password</label>
</div>

CSS

.login-form {position:relative; width:300px; margin-left:1em;padding-top:1em; border:1px solid gold; }

input[type=text] {margin-bottom:1em}
input[type=text] + label {position:absolute; left:4px; cursor:text; color:#999}
input[type=text]:focus + label {visibility:hidden}