JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="survey.css">

	<title></title>


</head>
<body>
    <script type="text/javascript">
  function removeFirstTD() {
    var element = document.getElementById("pnlPersonalDetails2");
    element.removeChild(element.firstChild);
}
</script>
	<div id="wrapper1">
	            <div id="wrapper2">    
                    <div id="surveyheader">
                        <div id="pnlHeader" class="head">
                           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; border-spacing:0;"><tbody><tr><td eshotcellid="buildingblockcellsingle" class="cell" style="padding: 30px 0px;"><table class="eshot_dd_elementDraggable ui-draggable eshot_dd_fullWidthDivider" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; border-spacing:0;" id="element1" eshot_dd_eshotelementtype="elementImageSingle"><tbody><tr><td eshotcontenttype="image" align="center"><!--[if gte mso 9]><img class="image msoimg" alt="" src="https://console.e-shot.net//Yogip/MascoloGroupLtd_v5/2/ClientHTML/Banner.png" width="600" vspace="0" hspace="0" border="0" /><![endif]--><!--[if !mso]><!----><img class="image nonmsoimg" alt="" src="" width="100%" vspace="0" hspace="0" border="0" style="max-width: 600px;"> <!-- <![endif]--></td></tr></tbody></table></td></tr></tbody></table>
		                
</div><!-- End head -->
		            </div>
                    <div id="surveycontent">
                        <div id="pnlContent" class="test">
	
                            
                            

	                        <p class="pagetitle">WIN TWO TICKETS TO LFW18</p>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
  <tbody><tr>
    <td class="desc_desc">
      <span id="lbl1">Want to win a pair of tickets to London Fashion Week
Spring/Summer 2018? Put in your details below and you could be
in for a chance.</span>
  ...

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	font-family: arial, helvetica, geneva, verdana, sans-serif;
	vertical-align: baseline;
	color: #000 !important;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	background-color: #f9f9f9;
	font-family: 'Lucida Sans Regular','Lucida Sans',Verdana,tahoma,arial,sans-serif;
	font-size:16px;
	margin:0 auto;
	padding:0;
	color:#333333;
	text-align:center;
	padding-top:30px;
}

#pnlPersonalDetails2  .surveyquestions td {
  display:block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end reset */

/* STRUCTURE */

#wrapper1	{
	margin-top:20px;
	width: 800px;
	margin:0px auto;
	text-align:left;
	background-color:#f2f2f2;
	padding:20px;
	-moz-box-shadow: 0 0 1px #cccccc inset;
	-webkit-box-shadow: 0 0 1px #cccccc inset;
	box-shadow: 0 0 1px #cccccc inset;
}
#wrapper2	{
}
#surveyheader	{
	background-color:#FFFFFF;
	height:150px;
	width:800px;
	border-bottom:1px solid #f2f2f2;
}
#surveycontent	{
	background-color:#FFFFFF;
	padding-left: 40px;
	padding-top: 10px;
	font-family: 'Lucida Sans Regular','Lucida...