JSFiddle - React, Tailwind, and code Playground

HTML

<form>
	<div class="form-field">
    <label>
      <input type email placeholder=" ">
      <span>Placeholder Text</span>
    </label>
	</div>
</form>

<style type="text/css">

	label {
  margin:20px 0;
  position:relative;
  display:inline-block;
}
  
span {
  padding:10px;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
}

input {
  padding:10px;
}

input:focus + span, input:not(:placeholder-shown) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

</style>