JSFiddle - React, Tailwind, and code Playground

HTML

<div align=center>
    <table class="matrix">
        <tr>
            <td>1+3i</td>
            <td>2+i</td>
            <td>10</td>
        </tr>
        <tr>
            <td>4-3i</td>
            <td>5</td>
            <td>-2</td>
        </tr>
    </table>
</div>

CSS

.matrix {
    position: relative;
}
body {
    padding: 20px;    
}
.matrix:before, .matrix:after {
    content: "";
    position: absolute;
    top: 0;
    border: 1px solid #f20;
    width: 6px;
    height: 100%;
}
.matrix:before {
    left: -6px;
    border-right: 0px;
}
.matrix:after {
    right: -6px;
    border-left: 0px;
}
.matrix td {
    padding: 5px;    
    text-align: center;
}