JSFiddle - React, Tailwind, and code Playground

HTML

<table>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>

CSS

.container {
    width: 1000px;
    margin: 0 auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px solid black;
}

td {
    position: relative;
}

td:before,
td:nth-child(4):after{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: -5px;
    top: -5px;
}

td:nth-child(4):after {
    position: absolute;
    right: -5px;
    top: -5px;
    left:auto;
}

tr:nth-child(4) td,
tr:nth-child(4) {
    border-color: transparent;
}