JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<article>
  <div class="material-input">
    <input type="text" required=""/>
    <label>Name</label><span></span>
  </div>
</article>
<article>
  <div class="material-input">
    <input type="text" required=""/>
    <label>E-mail</label><span></span>
  </div>
</article>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
  background: #3F51B5;
}

article {
  font-family: 'Roboto', sans-serif;
  padding: 5em 10em 2em;
}

.material-input {
  position: relative;
}
.material-input input[type="color"], .material-input input[type="date"], .material-input input[type="datetime"], .material-input input[type="datetime-local"], .material-input input[type="email"], .material-input input[type="month"], .material-input input[type="number"], .material-input input[type="password"], .material-input input[type="search"], .material-input input[type="tel"], .material-input input[type="text"], .material-input input[type="time"], .material-input input[type="url"], .material-input input[type="week"], .material-input input:not([type]), .material-input textarea {
  background-color: transparent;
  border-color: #7280C8;
  border-style: none none solid;
  border-width: 0 0 1px;
  box-sizing: border-box;
  color: #FFF;
  font-size: 16px;
  padding: 10px;
  width: 100%;
}
.material-input input[type="color"]:focus, .material-input input[type="date"]:focus, .material-input input[type="datetime"]:focus, .material-input input[type="datetime-local"]:focus, .material-input input[type="email"]:focus, .material-input input[type="month"]:focus, .material-input input[type="number"]:focus, .material-input input[type="password"]:focus, .material-input input[type="search"]:focus, .material-input input[type="tel"]:focus, .material-input input[type="text"]:focus, .material-input input[type="time"]:focus, .material-input input[type="url"]:focus, .material-input input[type="week"]:focus, .material-input input:not([type]):focus, .material-input textarea:focus {
  outline: 0;
}
.material-input input[type="color"]:focus ~ span, .material-input input[type="date"]:focus ~ span, .material-input input[type="datetime"]:focus ~ span, .material-input input[type="datetime-local"]:focus ~ span, .material-input input[type="email"]:focus ~ span, .material-input...