JSFiddle - React, Tailwind, and code Playground

by KlaytonJames

HTML

<div class="form">
  <form class="well">
    <div class="group">
      <label>Full name *</label>
      <input type="text" class="required" required>
      <small>Please, fill in this field</small>
    </div>
    <div class="group">
      <label>Email *</label>
      <input type="email" class="required" required>
      <small>Please, fill in this field</small>
    </div>
    <div class="group">
      <label>Website</label>
      <input type="url">
    </div>
    <div class="group">
      <label>Message *</label>
      <textarea rows="4" class="required" required></textarea>
      <small>Please, fill in this field</small>
    </div>
    <div class="group">
      <button type="submit">Submit</button>
    </div>
  </form>
</div>

SCSS

.form {
  padding: 30px 20px;
  .well {
    background: #e1f5fc;
    padding: 40px 20px 10px 40px;
    margin-top: 30px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    .group {
      flex: 50%;
      padding: 0 20px 30px 0;
      label {
        display: block;
        margin: 0 0 10px;
      }
      input {
        max-width: 420px;
      }
      input,
      textarea {
        display: block;
        font-size: 16px;
        width: 100%;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #ddd;
        background: #fff;
        &:focus {
          outline: none;
        }
      }
      small {
        font-size: 0;
        position: absolute;
        bottom: 10px;
        left: 0;
        max-width: 420px;
        width: 100%;
        color: $red;
        font-style: italic;
        text-align: right;
      }
      textarea+small {
        max-width: none;
        padding-right: 20px;
      }
      button {
        padding: 15px 20px;
        background: $blue;
        border: 0;
        border-radius: 4px;
        color: #fff;
        margin: 30px 0 30px;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          background: #000;
        }
      }
      &.error {
        input,
        textarea {
          border-color: $red;
        }
        small {
          font-size: 12px;
        }
      }
    }
  }
}

JavaScript

$(document).ready(function() {
  var required = $(".well").find(".required");
  $("button").on("click", function() {
    $(required).each(function() {
      if ($(this).val() == '') {
        $(this).parent(".group").addClass("error");
      } else {
        $(this).parent(".group").removeClass("error");
      }
    })
  })
})