<form class="card shadow shadow-large shadow-hover">
  <div class="card-header">Sign In</div>
  <div class="card-body">
    <div class="form-group">
      <input class="input-block" type="text" placeholder="Username" id="paperInputs1" minlength="2">
    </div>
    <div class="form-group">
      <input class="input-block" type="password" placeholder="Password" id="paperInputs1" minlength="4">
    </div>      
    <button class="btn-block background-secondary">Sign In</button>
  </div>
</form>

@import url("https://unpkg.com/papercss@1.9.2/dist/paper.css") layer(csspaper);

form:has(input:invalid) {
  border-color: var(--danger);
}


/* Demo style */
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-color: #f6eee3;
  opacity: 1;
  background-size: 20px 20px;
  background-image:  repeating-linear-gradient(0deg, #e5decf, #e5decf 1px, #f6eee3 1px, #f6eee3);
}

.card {
  background-color: #f5f5f5;
  width: 320px;
  max-width: 90vw;
}