JSFiddle - React, Tailwind, and code Playground

by nwellcome

HTML

<html>
<head><style type='text/css'>table, tr, td { border: 2px solid #07A5E4; margin: 0px; color: #192B69; padding: 5px; font-family: Calibri, sans-serif; }</style></head>
<body>
<p>The following recommendation is due in the next 30 days<!--(" + daysUntilDue + ")-->. Please respond to this email and provide an updated status within ten working days.</p>

<table cellspacing='0'>
	<tr>
		<td><b>Number:</b>actionItem.RecommendationNumber</td>
		<td><b>Ranking:</b>actionItem.Ranking</td>
		<td><b>Category:</b>actionItem.RiskCategory</td>
		<td><b>Repeat:</b>actionItem.RepeatFlag</td>
		<td><b>Self-Identified:</b>actionItem.SelfIdentifiedFlag</td>
	</tr>
	<tr>
		<td><b>Recommendation</b></td>
		<td colspan='4'>actionItem.Recommendation</td>
	</tr>
	<tr>
		<td><b>Action Plan</b></td>
		<td colspan='4'>actionItem.ActionPlan</td>
	</tr>
	<tr>
		<td><b>Action Plan Owner:</b>actionItem.ActionPlanOwner</td>
		<td><b>Action Plan Status:</b>actionItem.ActionPlanStatus</td>
		<td><b>Action Plan Due Date:</b>formatDate(actionItem.dueDate)"</td>
		<td colspan='2'><b>Functional Dependency:</b>actionItem.FunctionalDepedency</td>
	</tr>
</body></html>