JSFiddle - React, Tailwind, and code Playground

by Ken Sprague

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Interested in Investing?</title>
    <link rel="stylesheet" href="css/screen.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.validate.js"></script>
  </head>

  <body>
    <form class="cmxform" id="commentForm" method="post" action="">
      <fieldset class="ui-widget ui-widget-content ui-corner-all">
        <legend class="ui-widget ui-widget-header ui-corner-all">Please provide your name, email address, and a comment.</legend>
        <p>
          <label for="cname">Name (required, at least 2 characters)</label>
          <input id="cname" name="name" class="ui-widget-content" minlength="2" required type="text">
          <p>
            <label for="cemail">E-Mail (required)</label>
            <input id="cemail" name="email" class="ui-widget-content" type="email" required>
          </p>
          <p>
            <label for="ccomment">Your comment (required)</label>
            <textarea id="ccomment" name="comment" class="ui-widget-content" required></textarea>
          </p>
          <p>
            <button class="submit" type="submit">Submit</button>
          </p>
      </fieldset>
    </form>
    <script>
      $("#commentForm").validate();

    </script>
  </body>

</html>

CSS

body {
  font-size: 85%;
}

label {
  display: inline-block;
  width: 100px;
}

legend {
  padding: 0.5em;
}

fieldset fieldset label {
  display: block;
}

#commentForm {
  width: 500px;
}

#commentForm label {
  width: 250px;
}

#commentForm label.error,
#commentForm button.submit {
  margin-left: 253px;
}