JSFiddle - React, Tailwind, and code Playground

HTML

<div id="formDiv">
    <!-- Form div will be hidden after form submission -->
    <form id="myForm" runat="server">
        
<h1>Job Application<span>Apply now and get the opportunity to join us!</span></h1>

        <section> <span>1</span>Personal details</section>Name:
        <input type="text" name="name" required />
        <br/>
        <section> <span>2</span>Your experience</section>Department:
        <select name="department">
            <option>Math</option>
            <option>English</option>
            <option>French</option>
            <option>Science</option>
        </select>
        <br/>
        <section> <span>3</span>Contact</section>Email:
        <input type="email" name="email" placeholder="[email protected]" required />
        <br/>Message:
        <textarea name="message"></textarea>
        <br/>
        <section> <span>4</span>Attachment</section>CV:
        <input type="file" name="myFile" required />
        <br/>PASSPORT:
        <input type="file" name="myFile2" />
        <br/>
        <input type="submit" value="Apply" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
        google.script.run
          .withSuccessHandler(updateOutput)
          .processForm(this.parentNode)" />
        <br/>
    </form>
</div>
<div id="inProgress" style="display: none;">
    <!-- Progress starts hidden, but will be shown after form submission. -->Uploading. Please wait...</div>
<div id="output">
    <!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>

CSS

<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'> <style type="text/css"> 
form {
    width:450px;
    padding:30px;
    margin: auto;
    background: #FFF;
    border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
h1 {
    background: #2A88AD;
    padding: 20px 30px 15px 30px;
    margin: -30px -30px 30px -30px;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
    font: normal 30px'Bitter', serif;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    border: 1px solid #257C9E;
}
h1 > span {
    display: block;
    margin-top: 2px;
    font: 13px Arial, Helvetica, sans-serif;
}
label {
    display: block;
    font: 13px Arial, Helvetica, sans-serif;
    color: #888;
    margin-bottom: 15px;
}
input[type="text"], input[type="email"], input[type="file"], textarea, select {
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border: 2px solid #fff;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}
section {
    font: normal 20px'Bitter', serif;
    color: #2A88AD;
    margin-bottom: 5px;
}
section span {
    background: #2A88AD;
    padding: 5px 10px 5px 10px;
    position: absolute;
    border-radius: 50%;
    -webkit-border-radius:...

JavaScript

// Javascript function called by "submit" button handler,
  // to show results.
  function updateOutput(resultHtml) {
      toggle_visibility('inProgress');
      var outputDiv = document.getElementById('output');
      outputDiv.innerHTML = resultHtml;
  }

  // From blog.movalog.com/a/javascript-toggle-visibility/
  function toggle_visibility(id) {
      var e = document.getElementById(id);
      if (e.style.display == 'block') e.style.display = 'none';
      else e.style.display = 'block';
  }