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" value="[email protected]" required>
      <small>Please, fill in this field</small>
    </div>
    <div class="group">
      <label>Address</label>
      <input type="text">
    </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>

CSS

* {
  box-sizing: border-box;
  position: relative;
}

.form .well {
  background: #e1f5fc;
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

.form .well .group {
  flex: 30%;
  padding: 20px;
}

.form .well .group label {
  display: block;
  margin: 0 0 10px;
}

.form .well .group input,
.form .well .group textarea {
  display: block;
  font-size: 16px;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #fff;
}

.form .well .group input {
  max-width: 420px;
}

.form .well .group input:focus,
.form .well .group textarea:focus {
  outline: none;
}

.form .well .group small {
  font-size: 0;
  position: absolute;
  bottom: 10px;
  left: 0;
  max-width: 420px;
  width: 100%;
  color: #ff0000;
  font-style: italic;
  text-align: right;
}

.form .well .group textarea+small {
  max-width: none;
  padding-right: 20px;
}

.form .well .group button {
  padding: 15px 20px;
  background: #07b4ff;
  border: 0;
  border-radius: 4px;
  color: #fff;
  margin: 30px 0 30px;
  font-size: 16px;
  cursor: pointer;
}

.form .well .group button:hover {
  background: #000;
}

.form .well .group p {
  font-size: 14px;
}

.form .well .group.error input,
.form .well .group.error textarea {
  border-color: #ff0000;
}

.form .well .group.error 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");
      }
    })
  })
})