Label float input by Google

index.html

<div class="container">
  <label class="field-form" for="name">
    <input class="field" name="name" type="text" required autocomplete="off">
    <span class="label">Nome</span>
  </label>
</div>

style.scss

.container{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
}

.field-form{
  position: relative;
  
  & > .field{
    border: 1.5px solid #a2a2a2;
    border-radius: 5px;
    height: 50px;
    width: 100%;
    padding-left: 15px;
    outline: none;
    
    &:focus,
    &:valid{
      border: 1.5px solid #5fa8d3;
    }
    
    &:focus + .label,
    &:valid + .label{
      transform: translateY(-180%);
      margin-left: 11px;
      font-size: 14px;
      color: #5fa8d3;
      background-color: white;
      padding: 0 7px 0 7px;
    }
  }
  
  & > .label{
    position: absolute;
    bottom: 17px;
    left: 0%;
    padding: 0px 15px;
    font-size: 1rem;
    color: #a2a2a2;
    pointer-events: none;
    transition: all 0.3s ease;
  }
}