JSFiddle - React, Tailwind, and code Playground

HTML

<div id="form">
  <h1>Booking</h1>
  <p>Fill in form</p>
  <form id="contactform">
    <table id="formtable">
      <tr>
        <td>
          <label class="label" for="name">Full Name</label>
        </td>
        <td>
            <input class="input" id="name" type="text" />
        </td>
      </tr>
      <tr>
        <td>
          <label class="label" for="email">E-mail Address</label>
        </td>
        <td>
            <input class="input" id="email" type="email" />
        </td>
      </tr>
      <tr>
        <td>
          <label class="label" for="date">Date</label>
        </td>
        <td>
          <input class="input" type="text" id="datepicker" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
            <input id="continue" type="button" class="submitbtn" value="Continue.." />
        </td>
      </tr>
      <tr class="hidden">
        <td>
          <label class="label" for="telephone">Telephone</label>
        </td>
        <td>
            <input class="input" id="telephone" type="text" />
        </td>
      </tr>
      <tr class="hidden">
        <td>
          <label class="label" for="location">Location</label>
        </td>
        <td>
            <input class="input" id="location" type="text" />
        </td>
      </tr>
      <tr class="hidden">
        <td>
        </td>
        <td>
          <input id="submit" type="submit" class="submitbtn" value="Submit" />
        </td>
      </tr>
    </table>
  </form> 
</div>

CSS

#form{
    float:left;
    /*background:#0b0b0b;*/
    padding:0 0 10px 0;
    border-radius:3px;
    width:29%;
    margin:0 15px 0 0;
}

.hidden{
    display:none;
}

JavaScript

$(document).ready(function() {
    $('#contactform').on('click', '#continue', function() {
      $('.hidden').show('slow');
    });
});

$(document).ready(function() {
    $('#contactform').on('click', '#continue', function() {
      $('.hidden').fadeout('');
    });
});