JSFiddle - React, Tailwind, and code Playground

HTML

<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
	<table cellpadding="0" cellspacing="0" border="0" width="100%" class="gradientBg">
		<tr>
			<td>
			<table cellpadding="0" cellspacing="0" border="0" width="780" align="center">
				<tr>
					<td height="83"></td>
					<td>&nbsp;</td>
					<td class="progressBar">&nbsp;</td>
				</tr>
				<tr>
					<td colspan="3">
					<table cellpadding="0" cellspacing="0" border="0" width="100%" height="600">
						<tr>
							<td bgcolor="#ffffff" class="contentBg" colspan="3" height="25">&nbsp;</td>
						</tr>
						<tr>
							<td bgcolor="#ffffff" width="24">&nbsp;</td>
							<td bgcolor="#ffffff" valign="top" height="100%">


<LI> disable all the cells from "Every Monday" till "Every Sunday" as the initial status;
<LI> make "Never" exclusive from all the rest of options in the same row;
<LI> make "Less often", "Monthly" and "Weekly" exclusive each other;
<LI> when "weekly" is selected, eable the cells from "Every Monday" till "Every Sunday", and you can select more than one answer;
<LI> when "weekly" is deselected, disable the cells from "Every Monday" till "Every Sunday", and deselect all these cells.
</UL><br><br></B>
<B>Please indicate how often do you wathch the following TV channels?</B>
<form action="" name="form1">
<table border=0 class="ItemsPopupTable" cellspacing=0 cellpadding=0>

<tr><td>&nbsp;</td><td >&nbsp;</td><td>&nbsp;</td><td class="ScaleColumn" ><span Class="ScaleFont">Never</span></td><td class="ScaleColumn" ><span Class="ScaleFont">Less often</span></td><td class="ScaleColumn" ><span Class="ScaleFont">Monthly</span></td><td class="ScaleColumn" ><span Class="ScaleFont">Weekly</span></td><td class="ScaleColumn" ><span Class="ScaleFont">Every Monday</span></td><td class="ScaleColumn" ><span Class="ScaleFont">Every Tuesday</span></td><td class="ScaleColumn" ><span Class="ScaleFont">Every Wednesday</span></td><td class="ScaleColumn" ><span Class="ScaleFont">Every...

CSS

html {
	min-height: 100%;
	height: auto;
}

body {
	
	background-repeat: repeat-x;
	background-position: bottom left;
	background-color: #FFFFFF;
}

body, table, tr, td, p  {
	color: #116092;
	font-size: 10pt;
	font-family: Arial, Verdana, Trebuchet, Sans-serif;
}

.gradientBg {
	
	background-repeat: repeat-x;
}

.contentBg {
	background-repeat: repeat-x;
	padding-top:25px;
}

.BigRedFont {
	color: red;
	font-weight: bold;
}

.shout {
	color: #BE0006;
	font-weight: bold;
}

i {
	font-weight: normal;
	font-style: italic;
}

a {
	color: #404040;
	text-decoration: none;
}

a.link {
	text-decoration: underline;
}


hr {
	display: none;
}

input, select, textarea {
	color: #404040;
}


.checkbox, .radio {
	margin-right: 4px;
}


.OptionFont {
	color: #404040;
	font-size: 12px;

}


/* buttons */


#btnPrev, #btnNext {
	margin: 0px 15px 20px 15px;
}


/* progress bar */



.progressBar {
	padding-right: 20px;
}

.progressBar .complete
{
	vertical-align: bottom;
	text-align: right;
	font-weight: bold;
	font-size: 8pt;
	color: #2C8827;
}

.progressBar .bar
{
	clear: both;
	height: 16px;
	width: 332px;
	padding-left: 1px;
	padding-right: 1px;	


}

.progressBar .bar .filling
{
	position: relative;
	top: 1px;
	background-image: url(http://www.ssisurveys.com/OW/Sites/b2c_en_uk/bg_survey_progressBar_bar_f.gif);
	background-repeat: repeat-x;
	height: 3px;
}


/* titles */


h1
{

	font-size: 19px;
	color: #FB6708;
	font-weight: normal;
}

h1 strong {
	color: #BE0006;
}

h2
{
	margin-top:0;
	
	width: 687px;
	color: #FFFFFF;
	font-size: 15px;
	line-height: 24px;
	height: 24px;
	overflow: hidden;
}


/* single response */


.SRTable {
	margin-top: 8px;
	margin-bottom: 10px;
}

.SRTable td {
	height: 23px;
}


/* multiple response */

.MRTable {
	margin-top: 8px;
	margin-bottom: 20px;	
}

.MRTable td {
	height: 20px;
}



/* (multiple) items popup */

.ItemsPopupTable {
	margin-top: 15px;
	margin-bottom: 10px;	
}

.ItemsPopupTable td {
	padding-top: 3px;
	padding-bottom:...