<div class="content">
  <div data="input-focus">
    <input type="text" required>
    <label for="">Name</label>
  </div>
<!--   <div data="input-focus">
    <input type="password" required>
    <label for="">password</label>
  </div> -->
</div>

html,body{
  position:relative;
  width:100%;
  height:100%;
  background:#efefef;
}
.content{
  position:absolute;
  left:50%;
  top:50%;
  width:50%;
  height:50%;
  transform: translate(-50%, -50%);
  margin:auto;
  // padding: 50px 0;
  background: #fff;
  text-align:center;
  & > div{ 
    margin: 0px auto;
    width:80%;
  }
}

[data='input-focus']{
  position: relative;
  input{
    outline:none;
    -webkit-appearance: none;
    margin-top: 40px;
    display: block;
    width: 100%;
    font-size: 18px;
    border:0;
    border-bottom: 1px solid #ccc;
    line-height: 40px;
    &:focus{ 
      color: #191919;
      border-bottom: 1px solid #0096ff;
    }
    & ~ label{
      position: absolute;
      left: 0px;top:0;
      pointer-events:none;
      transition: all .3s;
      line-height: 40px;
      color: #808080;
    }
    &:focus ~ label,&:valid ~ label{
      top: -30px;
      font-size: 12px;
      color: #0096ff;
    }
  }
}