JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<mat-form-field [style.width.px]=300 floatLabel="never">
    <input type="text" matInput onkeyup="this.setAttribute('value', this.value);" value="" (keyup)="searchList($event.target.value)"/>
    <span class="placeholder">{{placeHolderText()}}</span>
  </mat-form-field>

CSS

.placeholder{
  position:absolute;
  display:block;
  left: 20px;
  top: 15px;
  left: 5px;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: lightgray;
}

input:focus + .placeholder, input:not([value=""]) + .placeholder{
  top:-5px
}