JSFiddle - React, Tailwind, and code Playground

by jansian

HTML

<div id="divReportForm">
	<div id="ApplicationTitle">360 Degree Feedback</div>
	<table id="TableFeedbackHeader">
		<tr>
			<td class="TableHeaderTitle" colspan="4">
				Report Information
			</td>
		</tr>
		<tr>
			<td class="FeedbackHeaderCol1">Staff Name:</td>
			<td class="FeedbackHeaderCol2">Ken Lim</td>
			<td class="FeedbackHeaderCol3" rowspan="2">Division/Department:</td>
			<td class="FeedbackHeaderCol4" rowspan="2">Human Resource</td>
		</tr>
		<tr>
			<td class="FeedbackHeaderCol1">Designation:</td>
			<td class="FeedbackHeaderCol2">Senior Executive(Career, Performance & Total Rewards Management)</td>
		</tr>
	</table>
	<div id="divFeedbackResult">
		<table id="tblAssessmentResult">
			<tr>
				<th class="TableHeaderTitle">Assessment Result</th>
			</tr>
			<tr class="MinlawValueRow">
				<td>
					<div class="MinlawValue">Integrity</div>
					<div class="BehavioralStatementItem">
						<table class="ResponseTable">
							<tr>
								<td class="Description Category" colspan="9">
									- Officer acts with honesty and impartiality.
								</td>
							</tr>
							<tr class="TableTitle">
								<td>Categories</td>
								<td>Responses</td>
								<td>Average Ratings</td>
								<td colspan="6">Distribution/Rating Frequencies</td>
							</tr>
							<tr class="TableTitle">
								<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>N.A</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
							</tr>
							<tr class="Item">
								<td class="Category">Self</td>
								<td class="Response">1</td>
								<td class="AverageRating">5.00</td>
								<td class="RateNA">&nbsp;</td>
								<td class="Rate1">&nbsp;</td>
								<td class="Rate2">&nbsp;</td>
								<td class="Rate3">&nbsp;</td>
								<td class="Rate4">&nbsp;</td>
								<td class="Rate5">1</td>
							</tr>
							<tr class="Item">
								<td class="Category">Supervisor</td>
								<td class="Response">2</td>
								<td class="AverageRating">4.50</td>
								<td...

CSS

#divReportForm table{
	border-collapse:collapse;
	border-spacing:0px;
}

#divReportForm,#TableFeedbackHeader,#tblAssessmentResult{
	margin-left:auto;
	margin-right:auto;
	width:100%;
}

#TableFeedbackHeader td{
	border:1px solid black;
	vertical-align:top;
	padding-left:2px;
	padding-right:2px;
}

.BehavioralStatementItem{
	padding-left:20px;
	width:95%;
}

#ApplicationTitle, 
.TableHeaderTitle,
.TableTitle td, 
.FeedbackHeaderCol1, 
.FeedbackHeaderCol3,
.MinlawValue,
.KeyAreas,
.BehavioralStatementItem .Average{
	font-weight:bold;
}

#ApplicationTitle{
	text-align:center;
    background-color:#d9d9d9;
	margin-bottom:15px;
	border:1px solid black;
}

.FeedbackHeaderCol2,.FeedbackHeaderCol4,.MinlawValue{
	color:#529df4;
}

.spacer{
	height:15px;
	border-left:none;
	border-right:none;
}

.TableHeaderTitle{
	background-color:#ddebf9;
}

#TableFeedbackHeader td.FeedbackHeaderCol3{
	border-right:none;
}

#TableFeedbackHeader td.FeedbackHeaderCol4{
	border-left:none;
}

#divFeedbackResult{
	margin-top:15px;
	border:1px solid black;
}

#divFeedbackResult td{
	padding-left:5px;
	padding-right:5px;
}

.MinlawValueRow{
	border-top:1px solid black;
	background-color:#f7f7f7;
}

.MinlawValueRowAlt{
	border-top:1px solid black;
	background-color:#e8f1fa;
}



#divFeedbackResult td .SubItem .Category{
	padding-left:15px;
}

.ResponseTable{
	width:100%;
	margin-top:5px;
	margin-bottom:25px;
}

.ResponseTable th, .ResponseTable td{
	border:dotted 1px black;
	text-align:center;
}

.ResponseTable td.Category, .TableHeaderTitle{
	text-align:left;
}

.ResponseTable .Average td{
	border:none;
	background-color:#fff3b2;
}

.Average{
	border:1px dotted black;
}

.Average td{
    padding-top:10px;
    padding-bottom:10px;
}

.Description{
	background-color:#fff3b2;
	border:1px dotted black;
	padding-top:10px;
    padding-bottom:10px;
}

#tblRatingsLegend{
	margin-top:20px;
	width:200px;
}

#tblRatingsLegend td, 
#tblRatingsLegend th, 
#tblQualitativeFeedback...