JSFiddle - React, Tailwind, and code Playground

HTML

<div class="board">
  <div class="board-row">
    <div class="square black-even">
      ♜
    </div>
    <div class="square black-odd">
      ♞
    </div>
    <div class="square black-even">
      ♝
    </div>
    <div class="square black-odd">
      ♛
    </div>
    <div class="square black-even">
      ♚
    </div>
    <div class="square black-odd">
      ♝
    </div>
    <div class="square black-even">
      ♞
    </div>
    <div class="square black-odd">
      ♜
    </div>
  </div>
  <br class="board-row-br" />
  <div class="board-row">
    <div class="square black-odd">
      ♟
    </div>
    <div class="square black-even">
      ♟
    </div>
    <div class="square black-odd">
      ♟
    </div>
    <div class="square black-even">
      ♟
    </div>
    <div class="square black-odd">
      ♟
    </div>
    <div class="square black-even">
      ♟
    </div>
    <div class="square black-odd">
      ♟
    </div>
    <div class="square black-even">
      ♟
    </div>
  </div>
  <br class="board-row-br" />
  <div class="board-row">
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
  </div>
  <br class="board-row-br" />
  <div class="board-row">
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
    <div class="square white-odd">
    </div>
    <div class="square white-even">
    </div>
  </div>
  <br class="board-row-br" />
  <div class="board-row">
    <div class="square white-even">
    </div>
    <div class="square...

CSS

.board {
  background-color: black;

}

.board-row {}

.board-row-br {
  clear: both;
}

.square {
  font-size: 72px;
  min-width: 72px;
  min-height: 72px;
  margin: 0;
  padding-left: 0.8%;  
  padding-bottom: 0.3%;
  width: 64px;
  height: 64px;
  float: left;
}

.white-even {
  color: white;
  text-shadow: -4px -4px 8px darkgray;
  background: linear-gradient(135deg, lightgray 0%, #f5f7fa 75%);


}

.white-odd {
  color: white;
  text-shadow: 2px 2px 4px darkgray;
  background: linear-gradient(109.6deg, rgba(0, 0, 0, 0.93) 11.2%, rgb(63, 61, 61) 78.9%);


}

.black-even {
  color: black;
  text-shadow: -4px -2px 1px darkgray;
  background: linear-gradient(135deg, lightgray 0%, #f5f7fa 75%);

}

.black-odd {
  color: black;
  text-shadow: 1px -1px 1px white;
  background: linear-gradient(109.6deg, rgba(0, 0, 0, 0.93) 11.2%, rgb(63, 61, 61) 78.9%);

}