JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<form action="#" class="simple-form">
  <input type="text" placeholder="First Name" required>
  <input type="email" placeholder="Email" required>
  <input type="number" min="5" max="9" placeholder="Count" value="3" />
  <input type="number" placeholder="Price" min="100" max="200" value="90" />
</form>

CSS

.simple-form {
  display: flex;
  overflow-y: scroll;
  padding-bottom: 1.25rem;
}

.simple-form input {
  margin: 0 .25rem;
  min-width: 125px;
  border: 1px solid #eee;
  border-left: 6px solid;
  border-radius: 5px;
  transition: border-color .5s ease-out;
}

.simple-form input:optional {
  border-left-color: #999;
}

.simple-form input:valid {
  border-left-color: palegreen;
}

.simple-form input:invalid {
  border-left-color: salmon;
}

.simple-form input:required:focus:valid {
  border-left-color: purple;
}

.simple-form input:focus:invalid {
  border-left-color: red;
}