JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div class="container">
  
  <h2>Google Material Design in CSS3<small>Inputs</small></h2>
  
  <form>
    
    <div class="group">      
      <input type="text" placeholder=" " required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
    </div>
      
    <div class="group">      
      <input type="text" placeholder=" ">
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Nickname</label>
    </div>
    
    <div class="group">      
      <input type="email" placeholder=" " required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Email</label>
    </div>
    
    <div class="group">      
      
      <textarea type="text" placeholder=" " ></textarea>
      <span class="bar"></span>
      <span class="highlight"></span>
      <label>Message</label>
    </div>
    
  </form>

  
</div>

CSS

* { box-sizing: border-box;}

/* basic stylings ------------------------------------------ */
body 			{ background:url(https://scotch.io/wp-content/uploads/2014/07/61.jpg); }
.container { 
  font-family:'Roboto', sans-serif;
  width:600px; 
  margin:30px auto 0; 
  display:flex;
  flex-direction: column;
  background:#FFF;
  padding:10px 50px 50px;
}
form {
  
  max-width: 300px;
}
h2 		 { 
  text-align:center; 
  margin-bottom:50px; 
}
h2 small { 
  font-weight:normal; 
  color:#888; 
  display:block; 
}
.footer 	{ text-align:center; }
.footer a  { color:#53B2C8; }

/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
  margin-bottom:45px; 
  
}
input, textarea {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom: 1px solid #757575;
}
textarea {
  position: relative;
  font-family:'Roboto';
  max-width: 300px;
  
  /* fallback height for Opera Mini*/
  height: 6em;
  
  /* height for 3 lines + padding top and bottom*/
  height: calc(1.6em*3 + 20px);
  
  line-height: 1.6em;
  padding-left: 5px;
  /*remove scrollbar in IE*/
  overflow: auto;
  
}

input:focus, textarea:focus 		{ outline:none; }

/* LABEL ======================================= */
label,
input:placeholder-shown ~ label, 
textarea:placeholder-shown ~ label {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
  z-index: 1;
}

/* active state */
/* changed from input:valid to a state which check if input is empty*/
input:focus ~ label,
textarea:focus ~ label,
input:not(:placeholder-shown) ~ label,
textarea:not(:placeholder-shown) ~ label {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
 ...