JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!DOCTYPE html>
<html>
<form>
    <div class="board">
        <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...

CSS

.board {
    width:250px;
    height:200px;
    margin:50px auto;
}
.board input {
    position:absolute;
    left:-9999px;
}
.board input#button1, .board input#button2, .board 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:200px;
    padding-left: 5px;
}
.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;
   ...