<label>Maximum of 12 characters
<input required pattern="(\S|\s){1,12}" placeholder=" ">
  </label>

<p>Read more about it on <a href="https://dev.to/shadowfaxrodeo/fun-tilting-form-validation-idea-35mm">dev.to</a></p>

body {
  font-size:20px;
  background:#FCFAF9;
  padding:1rem;
  font-family: Menlo, Consolas, Monaco, Liberation  Mono, Lucida Console, monospace; 
}

body > * + * {
  margin-top:2rem;
}

p {
  font-size:18px;
}


input {
    font: inherit;
  border:0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  display:flex;
  position:relative;
  padding:4px 12px;
  border-radius:4px;
  color:#1B1B1E;
  border:solid 2px;
}

button {

  text-transform:uppercase;
  background:#CA8B7D;
  box-shadow:0 2px #D0D4DC;
  cursor:pointer;
}

button:nth-child(even) {
  background:#6D98BA;
}

input {
  margin-top:1rem;
  box-shadow:inset 0 2px #D0D4DC, 0 2px #D0D4DC;
  background:#F8F4F1;
  padding:8px 12px;
}

input:placeholder-shown:invalid {
  transform:rotate(0deg);
}

input:placeholder-shown:invalid:focus {
  transform:rotate(-1deg);
}

input:invalid {
  transform:rotate(1deg);
}

input:focus {
  border-color:#CA8B7D;
  outline:2px dashed transparent;
  outline-offset:4px;
}

input:valid {
border-color:#6D98BA ;
}