JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input-field">
    <input type="name" name="name" required="" /> 
    <label onclick="move(this)">First Name</label></div>
    <div class="input-field">
    <input type="name" name="lname" required="" /> 
    <label onclick="move(this)">Last Name</label></div>

CSS

.input-field{margin:50px; position:relative;  width:204px;}
input{ border:1px solid #ccc; width:200px; height:3rem; font-size:1rem; position:relative;}
label{cursor: text; font-size: 1rem; left: 0rem; position: absolute; top: 0; transition: all 0.2s ease-out 0s; width:100%;
height:50%;}
.active{background:yellow; top:-35px; font-size:0.7rem}

JavaScript

function move(elem){
	var a = document.getElementsByTagName('label')
		for(i=0; i< a.length; i++){
			a[i].classList.remove('active');
		}
		elem.classList.add('active');
	
}