JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <table cellpadding="0"; cellspacing="0";>
            <tr>
                <td></td><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td></td>
            </tr>
            <tr>
                <style>
                table {
                border-bottom: solid 2px;
                border-left: solid 2px;
                border-right: solid 2px;
                border-top: solid 2px;
                border-collapse: collapse;

                }
                tr {
                text-align:center;
                }

                .black-square {
                    background-color:black;
                    width:50px;
                    height:50px;

                }
                .white-square {
                    background-color:white;
                    width:50px;
                    height:50px;

                }
                </style>
            <tr>    
                <td>8</td><td class="black-square"></td><td class="white-square"></td><td class="black-square"></td><td class="white-square"></td><td class="black-square"></td><td class="white-square"></td><td class="black-square"></td><td class="white-square"></td><td>8</td>
            </tr>
            <tr>
                <td>7</td><td class="white-square"></td><td class="black-square"></td><td class="white-square"></td><td class="black-square"></td><td class="white-square"></td><td class="black-square"></td><td class="white-square"></td><td class="black-square"></td><td>7</td>
            </tr>
            <tr>
                <td>6</td><td class="black-square"></td><td class="white-square"></td><td class="black-square"></td><td class="white-square"></td><td class="black-square"></td><td class="white-square"></td><td class="black-square"></td><td class="white-square"><td>6</td>
            </tr>
            <tr>
                <td>5</td><td...

CSS

.white-square,
.black-square 
{
    border: 1px solid #000;
    width: 49px !important;
    height: 49px !important;
}