JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr>
            <th></th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
        <tr>
            <th>1</th>
            <td><span id="A1" contenteditable>#####</span></td>
            <td><span id="B1" contenteditable></span></td>
            <td><span id="C1" contenteditable></span></td>
        </tr>
        <tr>
            <th>2</th>
            <td><span id="A2" contenteditable></span></td>
            <td><span id="B2" contenteditable></span></td>
            <td><span id="C2" contenteditable></span></td>
        </tr>
        <tr>
            <th>3</th>
            <td><span id="A3" contenteditable></span></td>
            <td><span id="B3" contenteditable></span></td>
            <td><span id="C3" contenteditable></span></td>
        </tr>
    </tbody>
</table>

CSS

td, tr, th {
    border: 1px solid black;
}
table {
    border-collapse: collapse;
}
td, th {
    min-width: 50px;
    height: 21px;
}
span {
    width: 100%;
    display: block;
}