JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inner">
    <br /><br /><br />
    <input type="text" required="" />
    <label placeholder="Token"></label>
</div>

CSS

input[type="text"],input[type="email"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none;height:calc(3em + 2px);width:100%;margin:0 0 1em;padding:1em;border:1px solid #cccccc;background:#fbfbfb;border-radius:1.5em;resize:none;box-shadow:none !important;}input[type="text"][required]:focus,input[type="email"][required]:focus{border-color:#00bafa !important;}input[type="text"][required]:focus+label[placeholder]:before,input[type="email"][required]:focus+label[placeholder]:before{color:#00bafa;}
input[type="text"][required]:focus+label[placeholder]:before,input[type="email"][required]:focus+label[placeholder]:before,input[type="text"][required]:valid+label[placeholder]:before,input[type="email"][required]:valid+label[placeholder]:before{transition-duration:.2s;-webkit-transform:translate(0, -1.1em) scale(0.9, 0.9);transform:translate(0, -1.1em) scale(0.9, 0.9);}
input[type="text"][required]:invalid+label[placeholder][alt]:before,input[type="email"][required]:invalid+label[placeholder][alt]:before{content:attr(alt);}
input[type="text"][required]:invalid+label[placeholder][itemprop]:before,input[type="email"][required]:invalid+label[placeholder][itemprop]:before{content:attr(itemprop) " " attr(placeholder);}
input[type="text"][required]+label[placeholder],input[type="email"][required]+label[placeholder]{display:block;pointer-events:none;line-height:1em;margin-top:calc(-2.2em - 2px);margin-bottom:calc((3em - 1em) + 2px);}input[type="text"][required]+label[placeholder]:before,input[type="email"][required]+label[placeholder]:before{content:attr(placeholder);display:inline-block;margin:0 calc(1em + 2px);padding:0 2px;color:#898989;white-space:nowrap;transition:0.3s ease-in-out;background-image:linear-gradient(to bottom, #fbfbfb, #fbfbfb);background-size:100%...