JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/dropzone/3.8.2/dropzone.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.js"></script>
<form action="" class="m-form" method="post">
  <ol>
    <li>
        <input type="text" id="firstname" name="firstname">
    </li>
    <li>
      <input type="text" id="lastname" name="lastname">
    </li>
    <li>
      <input type="email" id="email" name="email">
    </li>
    <li>
      <div class="m-form__dropzone"></div>
    </li>
    <li>
      <button type="submit">Abschicken</button>
    </li>
  </ol>  
</form>

SCSS

.m-form {
  > ol > li {
    margin-top: 1em;
  }
}
.m-form__dropzone {
  display: inline-block;
  height: 200px;
  width: 210px;
  background-color: #f2f2f2;
  border: 2px dotted #ccc;
}

JavaScript

(function ($, document) {
  var self = {
    validation: function () {
      $('.m-form').validate({
        rules: {
          firstname: {
            required: true
          },
          lastname: {
            required: true
          },
          email: {
            required: true,
            email: true
          }
        },
        messages: {
          firstname: {
            required: "Please insert a value"
          },
          lastname: {
            required: "Please insert a value"
          },
          email: {
            required: "Please insert a value",
            email: 'Plase insert a valid email'
          }
        },
        submitHandler: {
          $.ajax({
            url: $('.m-form').attr('action'),
            type: 'POST',
            dataType: 'json',
            data: $('.m-form').serialize(),
            success: function () {
              $('.m-form').fadeOut(3000);
            }
          });
        }
      });
    }(),
    dropzone: function () {
      $('.m-form__dropzone').dropzone({
        url: '',
        autoProcessQueue: false
      });
    }()
  };

}(jQuery, document));