JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div id="game_board"> <span id="0"></span>
 <span id="0"></span>
 <span id="1"></span>
 <span id="2"></span>
 <span id="3"></span>
        <span id="4"></span>

</div>

CSS

svg {
    border: 3px solid #ccc;
}
#0 {
    background-color: #ccc;
}

JavaScript

function arrow(direction) {
    return "<svg  version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='30' height='30' viewBox='0 0 32 32' ><g transform='rotate(" + direction + " 15 15)'>	<path d='M27.414 12.586l-10-10c-0.781-0.781-2.047-0.781-2.828 0l-10 10c-0.781 0.781-0.781 2.047 0 2.828 0.781 0.781 2.047 0.781 2.828 0l6.586-6.586v19.172c0 1.105 0.895 2 2 2s2-0.895 2-2v-19.172l6.586 6.586c0.39 0.39 0.902 0.586 1.414 0.586s1.024-0.195 1.414-0.586c0.781-0.781 0.781-2.047 0-2.828z' fill='#000000' / ></g></svg>";
}
arrow_up = arrow(0);
arrow_45 = arrow(45);
arrow_right = arrow(90);
arrow_lu = arrow(315);
arrow_left = arrow(270);
$("#game_board").append(arrow_left);
$("#game_board").append(arrow_lu);
$("#game_board").append(arrow_up);
$("#game_board").append(arrow_45);
$("#game_board").append(arrow_right);

$("#game_board").remove();