JSFiddle - React, Tailwind, and code Playground
HTML
<table border="1" class="table" cellpadding="0" cellspacing="0">
<tr>
<td class="tablecell">
<div class="numberandbuttons">
<div class="littlenumbers">
1579
</div>
<div class="lefrsqr">
</div>
<div class="rightsqr">
</div>
</div>
</td>
<td class="tablecell">
<div class="numberandbuttons">
<div class="number">
2
</div>
<div class="lefrsqr">
</div>
<div class="rightsqr">
</div>
</div>
</td>
</tr>
<tr>
<td class="tablecell">
<div class="numberandbuttons">
<div class="number">
3
</div>
<div class="lefrsqr">
</div>
<div class="rightsqr">
</div>
</div>
</td>
<td class="tablecell">
<div class="numberandbuttons">
<div class="number">
</div>
<div class="lefrsqr">
</div>
<div class="rightsqr">
</div>
</div>
</td>
</tr>
</table>
CSS
.table{
border-collapse: collapse; border: 1px solid #000;
}
.numberandbuttons{
position:relative;
background:#fcc;
width:60px;
height:60px;
}
.number{
position:absolute;
background:#cfc;
top:10px;
width:100%;
height:38px;
font-size: 38px;
text-align:center;
}
.littlenumbers{
position:absolute;
background:#ccf;
top:25px;
width:100%;
height:10px;
font-size: 10px;
text-align:center;
}
.lefrsqr{
width:15px;
height:15px;
background:#0cc;
position:absolute;
left:0;
bottom:0;
}
.rightsqr{
width:15px;
height:15px;
background:#cc0;
position:absolute;
right:0;
bottom:0;
}