JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<div class="chessboard">
    <!-- 1st -->
	<div class="yellow">&#9814;</div>
    <div class="red">&#9816;</div>
    <div class="yellow">&#9815;</div>
    <div class="red">&#9813;</div>
    <div class="yellow">&#9812;</div>
    <div class="red">&#9815;</div>
    <div class="yellow">&#9816;</div>
    <div class="red">&#9814;</div>

    <!-- 2nd -->
    <div class="red">&#9817;</div>
    <div class="yellow">&#9817;</div>
    <div class="red">&#9817;</div>
    <div class="yellow">&#9817;</div>
    <div class="red">&#9817;</div>
    <div class="yellow">&#9817;</div>
    <div class="red">&#9817;</div>
    <div class="yellow">&#9817;</div>

    <!-- 3rd -->
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>

    <!-- 4th -->
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>

    <!-- 5th -->
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>

    <!-- 6th -->
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>

    <!-- 7th -->
    <div class="yellow">&#9823;</div>
    <div class="red">&#9823;</div>
    <div class="yellow">&#9823;</div>
    <div class="red">&#9823;</div>
    <div class="yellow">&#9823;</div>
    <div class="red">&#9823;</div>
    <div class="yellow">&#9823;</div>
    <div class="red">&#9823;</div>

    <!-- 8th -->
    <div...

CSS

.chessboard {
        width: 480px;
        height: 480px;
        margin: 1px;
        border: 2px solid #F44336;
    }

    .red, .yellow {
        float: left;
        width: 60px;
        height: 60px;
        font-size:50px;
        text-align:center;
        display: table-cell;
        vertical-align:middle;
        box-sizing: border-box;
    }

    .red {
        background-color: tan;
    }

    .yellow {
        background-color: brown;
    }

JavaScript

var canvas = document.getElementsByClassName("chessboard")[0];
var player1 = "/u2568";
var player2 = "/u2569";
var turn = "White";