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 name="item2" id="item2" rows="4" cols="70"></textarea></td>
							<td>&nbsp;</td>
							<td valign="top" class="style3new"><input type="text" id="amount2" name="amount2" value="" /></td>
						</tr>
						<tr>
							<td valign="top" nowrap="nowrap" class="style1" width="10">3</td>
							<td valign="top" ><textarea name="item3" id="item3" rows="4" cols="70"></textarea></td>
							<td>&nbsp;</td>
							<td valign="top" class="style3new"><input type="text" id="amount3" name="amount3" value=""  /></td>
						</tr>
						<tr>
							<td valign="top" nowrap="nowrap" class="style1">4</td>
							<td valign="top" ><textarea name="item4" id="item4"rows="4" cols="70"></textarea></td>
							<td>&nbsp;</td>
							<td valign="top" class="style3new"><input type="text" id="amount4" name="amount4"...

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: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-right:30px;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar...

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;
				});
				});