JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<link rel="stylesheet" href="https://rawgit.com/oakmac/chessboardjs/master/css/chessboard.css">
<script src="https://rawgit.com/oakmac/chessboardjs/master/js/chessboard.js"></script>
<div id="board" style="width: 400px"></div>

CSS

.highlight-move:after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    
    background: #75f547;
    background: -webkit-radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%);
    background:         radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%);
}

JavaScript

var board = new ChessBoard('board');

$('#board').find('.square-d7, .square-f6').addClass('highlight-move');