JSFiddle - React, Tailwind, and code Playground

HTML

<table></table>

CSS

td { width:20px; height:20px; border:1px solid grey; }
.x { background-color: #aaa }

JavaScript

var X = 5;

for (i=0; i<=X; i++) {
    $('table').append('<tr>');
    
    for (j=0; j<=X; j++)
        ((i == j)||(i == X-j)) ?
            $('tr:last').append('<td class="x"></td>') : 
                $('tr:last').append('<td></td>');
    
    $('table').append('</tr>'); 
}