<div class="container">
<form>
  <div class="form-row">
    <label for='scream-content'>Enter something to scream:</label>
    <input id='scream-content' type='text' pattern='[A-Z]+' title='A word with all capital letters' required/>
  </div>
  <div class="form-row">
    <label for='single-digit'>Enter a single digit:</label>
    <input id='single-digit' type='number' min='0' max='9'/>
  </div>
  <div class="form-row">
    <label for='scream-content'>Enter something in camelCase:</label>
    <input id='scream-content' type='text' pattern='[a-z]+((\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?' title='A phrase written so that each next word or abbreviation begins with a capital letter.' placeholder='thisIsAPhrase' required/>
  </div>
  <input class='submit-button' type="submit" value="Submit" />
</form>
</div>
body {
  font-family: "Fira Sans", sans-serif;
}

.container {
  max-width: 300px;
  margin: 0 auto;
}

.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  input {
    width: 100%;
    &:invalid {
      outline: none;
      box-shadow: none;
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.