JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tic" cellpadding="0" cellspacing="0" border="5" bordercolor="black" bordercolorlight="gray" bgcolor="white">
	<tr>
		<td width="55" height="55" class="x"></td>
		<td width="55" height="55" class="o"></td>
		<td width="55" height="55" class="x"></td>
	</tr>
	<tr>
		<td width="55" height="55" class="o"></td>
		<td width="55" height="55" class="x"></td>
		<td width="55" height="55" class="o"></td>
	</tr>
	<tr>
		<td width="55" height="55" class="x"></td>
		<td width="55" height="55" class="o"></td>
		<td width="55" height="55" class="x"></td>
	</tr>
</table>

CSS

table{
	text-align:center;
	font-size:2em;
	font-weight:bold;
}
td.o:after{
	content:"&#9675;";
	font-weight:bold;
}
td.x:after{
	content:"&#x2716;"
}