JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<form>
<div class="tictactoe">
<input type="radio" name="p1" id="p1b" checked="checked" />
<input type="radio" name="p1" id="p1o" />
<input type="radio" name="p1" id="p1x" />

<input type="radio" name="p2" id="p2b" checked="checked" />
<input type="radio" name="p2" id="p2o" />
<input type="radio" name="p2" id="p2x" />

<input type="radio" name="p3" id="p3b" checked="checked" />
<input type="radio" name="p3" id="p3o" />
<input type="radio" name="p3" id="p3x" />

<input type="radio" name="p4" id="p4b" checked="checked" />
<input type="radio" name="p4" id="p4o" />
<input type="radio" name="p4" id="p4x" />

<input type="radio" name="p5" id="p5b" checked="checked" />
<input type="radio" name="p5" id="p5o" />
<input type="radio" name="p5" id="p5x" />

<input type="radio" name="p6" id="p6b" checked="checked" />
<input type="radio" name="p6" id="p6o" />
<input type="radio" name="p6" id="p6x" />

<input type="radio" name="p7" id="p7b" checked="checked" />
<input type="radio" name="p7" id="p7o" />
<input type="radio" name="p7" id="p7x" />

<input type="radio" name="p8" id="p8b" checked="checked" />
<input type="radio" name="p8" id="p8o" />
<input type="radio" name="p8" id="p8x" />

<input type="radio" name="p9" id="p9b" checked="checked" />
<input type="radio" name="p9" id="p9o" />
<input type="radio" name="p9" id="p9x" />

<div class="grid">
	<div class="lines">
		<div class="row1"></div>
		<div class="row2"></div>
		<div class="col1"></div>
		<div class="col2"></div>
	</div>
	<div class="ox">
		<div class="p1"><span class="po">o</span><span class="px">X</span></div>
		<div class="p2"><span class="po">o</span><span class="px">X</span></div>
		<div class="p3"><span class="po">o</span><span class="px">X</span></div>
		<div class="p4"><span class="po">o</span><span class="px">X</span></div>
		<div class="p5"><span class="po">o</span><span class="px">X</span></div>
		<div...

CSS

.tictactoe {width:250px; height:200px; margin:50px auto;}
.tictactoe input {position:absolute; left:-9999px;}
.tictactoe input#button1,
.tictactoe input#button2,
.tictactoe input#button3 {position:static;}

.grid {width:150px; height:150px; position:relative;}

.grid p {padding:0; margin:0; font: 16px/25px verdana, sans-serif; color:#000;}
.grid p a {color:#000;}
.grid p a:hover {text-decoration:none;}

.grid .lines {width:150px; height:150px; position:absolute; left:0; top:0;}
.grid .lines .row1 {box-shadow: 1px 1px 1px 1px #000;width:150px; height:2px; background:#000; position:absolute; left:0; top:48px;}
.grid .lines .row2 {box-shadow: 1px 1px 1px 1px #000;width:150px; height:2px; background:#000; position:absolute; left:0; top:98px;}
.grid .lines .col1 {box-shadow: 1px 1px 1px 1px #000;width:2px; height:150px; background:#000; position:absolute; left:48px; top:0;}
.grid .lines .col2 {box-shadow: 1px 1px 1px 1px #000;width:2px; height:150px; background:#000; position:absolute; left:98px; top:0;}

.grid .wins {display:none; position:absolute; top:160px; width:300px;}
.grid .col {width:4px; height:150px; background:#000; position:absolute; top:0; display:none;}
.grid .row {width:150px; height:4px; background:#000; position:absolute; left:0; display:none;}
.grid .dlr {width:150px; height:4px; background:#000; position:absolute; left:0; top:73px; display:none;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.grid .drl {width:150px; height:4px; background:#000; position:absolute; left:0; top:73px; display:none;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.grid .cover {width:150px; height:150px; position:absolute; left:0; top:0; display:none;}

.grid .ox {width:150px; height:150px; position:absolute; left:0; top:0;}
.grid .ox div {width:50px; height:50px;...