JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name <span class="reqOpt">Required, Minimum of 2 characters</span></label>
      <input id="cname" name="name" minlength="2" type="text" required>  
    </p>
    <p>
      <label for="cemail">E-Mail <span class="reqOpt">Required</span></label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL <span class="reqOpt">Optional</span></label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Comment <span class="reqOpt">Required</span></label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="SUBMIT">
    </p>
  </fieldset>
</form>

CSS

input, textarea {
  display:block;
  margin-bottom:20px;
  width:300px;
  line-height:30px;
  font-size:24px;
}
label {
  margin-top:20px;
  display:block;
}
label.error {
  background:#FF4040;
  border:1px solid #FF4040;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius:8px;
  box-shadow:rgba(0, 0, 0, 0.2) 0 5px 10px;
  color:#FFFFFF;
  padding:10px;
  position:relative;
  top:6px;
  width:250px;
  margin-bottom:20px;
}
label.error:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
label.error:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #FF4040;
	border-width: 10px;
	margin-left: -10px;
}
.reqOpt {
  color:#aaa;
  font-size:14px;
}
.submit {
  background-color:#0022bb;
  color:#fff;
  border:none;
  outline:0;
  padding:5px;
  display:block;
  border-radius:8px;
}

JavaScript

$("#commentForm").validate({
  wrapper: "div"
});