JSFiddle - React, Tailwind, and code Playground

by maheshBongani

HTML

<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-input/v2.2.3/paper-input/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-input.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<style>
  paper-input {
    max-width: 400px;
    margin: auto;
  }

  iron-icon,
  div[suffix] {
    color: hsl(0, 0%, 50%);
    margin-right: 12px;
  }

</style>

<form>
  <paper-input always-float-label label="Floating label" required></paper-input>
  <paper-input label="username">
    <iron-icon icon="mail" slot="prefix"></iron-icon>
    <div slot="suffix">@email.com</div>
  </paper-input>
</form>