JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div style="text-align:center"><h1>NO JS Игра в крестики нолики</h1></div>
<form>
<div id="gr">
<input type="checkbox" id="a1" />
<input type="checkbox" id="a2" />
<input type="checkbox" id="a3" />
<input type="checkbox" id="a4" />
<input type="checkbox" id="a5" />
<input type="checkbox" id="a6" />
<input type="checkbox" id="a7" />
<input type="checkbox" id="a8" />
<input type="checkbox" id="a9" />

<input type="checkbox" id="b1" />
<input type="checkbox" id="b2" />
<input type="checkbox" id="b3" />
<input type="checkbox" id="b4" />
<input type="checkbox" id="b5" />
<input type="checkbox" id="b6" />
<input type="checkbox" id="b7" />
<input type="checkbox" id="b8" />
<input type="checkbox" id="b9" />

<input type="checkbox" id="c1" />
<input type="checkbox" id="c2" />
<input type="checkbox" id="c3" />
<input type="checkbox" id="c4" />
<input type="checkbox" id="c5" />
<input type="checkbox" id="c6" />
<input type="checkbox" id="c7" />
<input type="checkbox" id="c8" />
<input type="checkbox" id="c9" />

<input type="checkbox" id="d1" />
<input type="checkbox" id="d2" />
<input type="checkbox" id="d3" />
<input type="checkbox" id="d4" />
<input type="checkbox" id="d5" />
<input type="checkbox" id="d6" />
<input type="checkbox" id="d7" />
<input type="checkbox" id="d8" />
<input type="checkbox" id="d9" />

<input type="checkbox" id="e1" />
<input type="checkbox" id="e2" />
<input type="checkbox" id="e3" />
<input type="checkbox" id="e4" />
<input type="checkbox" id="e5" />
<input type="checkbox" id="e6" />
<input type="checkbox" id="e7" />
<input type="checkbox" id="e8" />
<input type="checkbox" id="e9" />


<div id="pa">
	<label for="a1" id="aa1"></label>
	<label for="a2" id="aa2"></label>
	<label for="a3" id="aa3"></label>
	<label for="a4" id="aa4"></label>
	<label for="a5" id="aa5"></label>
	<label for="a6" id="aa6"></label>
	<label for="a7" id="aa7"></label>
	<label for="a8" id="aa8"></label>
	<label for="a9" id="aa9"></label>
</div>

<div id="pb">
	<label...

CSS

#gr {width:300px; height:300px; position:relative; margin:0 auto; z-index:10;}
#button1 {display:block; width:200px; background:#ccc; font:normal 18px/26px  'texgyreadventorregular', arial, sans-serif; color:#000; border:0; padding:10px; border-radius:4px; margin:0 auto; margin-top:100px; cursor:pointer;}

#gr:before {content:""; display:block; width:94px; height:300px; border:6px solid #000; border-width:0 6px; position:absolute; left:97px; top:0; z-index:-1;}
#gr:after {content:""; display:block; width:300px; height:94px; border:6px solid #000; border-width:6px 0; position:absolute; left:0; top:97px; z-index:-1;}

#gr div {position:absolute; left:0; top:0; width:300px; height:300px; z-index:5;}
#gr p {padding:300px 0 0 0; margin:0; font: 50px/100px 'texgyreadventorregular', arial, sans-serif; color:#000; width:300px; text-align:center; position:absolute; left:0; top:0; display:none; z-index:200;}
#gr input {display:none; position:absolute; left:-9999px;}

#gr label {display:block; width:100px; height:100px; cursor:pointer; float:left;}
#gr span {width:100px; height:100px; position:absolute; z-index:100; display:none; font: 70px/100px 'texgyreadventorregular', arial, sans-serif; color:#000; text-align:center;}

#gr span[id*="1"] {left:0; top:0;}
#gr span[id*="2"] {left:100px; top:0;}
#gr span[id*="3"] {left:200px; top:0;}
#gr span[id*="4"] {left:0; top:100px;}
#gr span[id*="5"] {left:100px; top:100px;}
#gr span[id*="6"] {left:200px; top:100px;}
#gr span[id*="7"] {left:0; top:200px;}
#gr span[id*="8"] {left:100px; top:200px;}
#gr span[id*="9"] {left:200px; top:200px;}

#gr *[id*="o"] {color:#c00;}
#gr *[id*="x"] {color:#080;}
#gr *[id*="d"] {color:#080;}
#gr *[id*="dd"] {color:#000;}

#gr #pb,
#gr #pc,
#gr #pd,
#gr #pe {left:-9999px;}
#gr #pa {z-index:10;}

#gr input[id*="a"]:checked ~ #pa {left:-9999px;}
#gr input[id*="a"]:checked ~ #pb {left:0; z-index:10;}
#gr input[id*="b"]:checked ~ #pb {left:-9999px;}
#gr input[id*="b"]:checked ~ #pc {left:0;...