JSFiddle - React, Tailwind, and code Playground

by Taqi_Shah

HTML

<script src="jquery.validate.min.js"></script>
<link rel="stylesheet" href="bootstrap.css">
 <!-- Contacts -->
  <div id="contacts">
    <div class="row">
      <!-- Alignment -->
      <div class="col-sm-offset-3 col-sm-4">
        <!-- Form itself -->
        <form name="sentMessage" action="" method="POST" class="well" id="contactForm"  novalidate>
          {% csrf_token %}
          <legend>Send Messages</legend>
          <div class="control-group">
            <div class="controls">
              <input type="text" class="form-control"
              placeholder="Subject" id="name" name="Subject" required
              data-validation-required-message="Please enter subject" />
              <p class="help-block"></p>
            </div>
          </div>


          <div class="control-group">
            <div class="controls">
              <textarea rows="10" cols="100" class="form-control"
              placeholder="Message" id="message" name="Content" required
              data-validation-required-message="Please enter your message" minlength="5"
              data-validation-minlength-message="Min 5 characters"
              maxlength="999" style="resize:none"></textarea>
            </div>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="Sms" checked>
              Send Sms to Selected Users
            </label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="optionsRadios" id="optionsRadios2" value="Email">
              Send Email To Selected Users
            </label>
          </div>
          <div id="success"> </div>
          <button type="submit" class="btn btn-primary btn-sm pull-right">Send</button><br />
        </form>
      </div>
    </div>
  </div>