JSFiddle - React, Tailwind, and code Playground

HTML

<div class='table-container'>
    <div class='table'>
        <div class='board'>
            <div class='col1 row1' id='box1'></div>
            <div class='col2 row1' id='box2'></div>
            <div class='col3 row1' id='box3'></div>
            <div class='col1 row2' id='box4'></div>
            <div class='col2 row2' id='box5'></div>
            <div class='col3 row2' id='box6'></div>
            <div class='col1 row3' id='box7'></div>
            <div class='col2 row3' id='box8'></div>
            <div class='col3 row3' id='box9'></div>
        </div>
    </div>
</div>

CSS

html, body {
    margin: 0;
    font-size: 2vw;
}
div {
    position: absolute;
    border: 0 white solid;
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}
.board {
    width: 54vw;
    height: 54vw;
    position: relative;
    left: 2vw;
    top: 2vw;
}
.table-container, .table, .board {
    border: 0;
    background: gray;
    display: block;
    justify-content: flex-start;
    align-content: stretch;
    flex-direction: row;    
}
.table-container, .table {
    width: 100%;
    height: 100%;
}
.row1 {
    top: 2vw;
    height: 19vw;
    border-top-width: 1vw;
}
.row2 {
    top: 20vw;
    height: 18vw;
    border-top-width: 0.25vw;
}
.row3 {
    top: 38vw;
    height: 17.25vw;
    border-top-width: 0.25vw;
    border-bottom-width: 1vw;
}
.col1 {
    left: 2vw;
    width: 19vw;
    border-left-width: 1vw;
}
.col2 {
    left: 20vw;
    width: 18vw;
    border-left-width: 0.25vw;
}
.col3 {
    left: 38vw;
    width: 17.25vw;
    border-left-width: 0.25vw;
    border-right-width: 1vw;
}