JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="formWrapper">
        <form id="msform">
            <fieldset>
                	<h2 class="fs-title">Bestelling</h2>

                	<h3 class="fs-subtitle">Stap 2: bestelling van uw artikelen</h3>	
                <!-- end handmatige bestel order -->
                <div class="manualOrderBox">
                    <p>
                        <!--handmatige bestel order -->
                        <!--statusHead1 style to be found in progressformstyle.css -->
                        <div class="statusHead1">
                            <table width="100%">
                                <tbody>
                                    <tr>
                                        <td width="10">Item</td>
                                        <td style="padding-left:80px;padding-right:10px;">Artikelomschrijving</td>
                                        <td>&nbsp;</td>
                                        <td>Aantal</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <table width="100%">
                            <tr>
                                <td nowrap="nowrap" valign="top" class="style1" width="10">1</td>
                                <td valign="top">
                                    <textarea name="item1" id="item1" rows="4" cols="90"></textarea>
                                </td>
                                <td>&nbsp;</td>
                                <td valign="top" class="style3new">
                                    <input type="text" id="amount1" name="amount1" value="" />
                                </td>
                            </tr>
                            <tr>
                                <td valign="top" nowrap="nowrap" class="style1" width="10">2</td>
                                <td valign="top">
                                    <textarea...

CSS

/*custom font*/
 @import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
 * {
    margin: 0;
    padding: 0;
}
#formWrapper {
    min-height:650px;
}
#mhead {
    font-family: Georgia !important;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    text-align: center;
    font-family: georgia;
    position: fixed;
    top: 0px;
    width: 100%;
    padding: 20px;
}
/*form styles*/
 #msform {
    /* font of the form */
    font-family: montserrat, arial, verdana;
    width: 800px;
    margin: 50px auto;
    text-align: center;
    /*----------------------->1*/
    position: relative;
}
#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;
    /*----------------------->2*/
    position: absolute;
}
/*Hide all except first fieldset*/
 #msform fieldset:not(:first-of-type) {
    display: none;
}
/*inputs*/
 #msform input, #msform textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}
/*buttons*/
 #msform .action-button {
    width: 100px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
 .fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom:...

JavaScript

$(document).ready(function () {
    var newAnchor = $('<a href="#" id="toggle-manualOrderBox" class="btn"></a>');
    var manualBox = $('.manualOrderBox');
    var catalogusBox = $('.catalogusOrderBox');
    manualBox.slideUp({
        duration: 0
    }).slideDown({
        duration: 0
    }).before(newAnchor);
    catalogusBox.slideUp({
        duration: 0
    });
    newAnchor.text('Via TU bestellen');
    newAnchor.click(function () {
        newAnchor.text(manualBox.is(':visible') ? 'Handmatig bestellen' : 'Via TU bestellen');
        catalogusBox.stop(true).slideToggle(400);
        manualBox.stop(true).slideToggle(400);
        return false;
    });
});