JSFiddle - React, Tailwind, and code Playground

HTML

<!-- big table -->
	<table id="zero-table">
		<tr id="zero-row">
	  		<td id="zero-data">0</td>
		</tr>
  </table>
  		  
<!-- tables 1 & 2 -->
  <table id="table-12">
  	<tr id="row-1">
  		<td class="data-1234">1</td>
   </tr>
   <tr id="row-2">
  		<td class="data-1234">2</td>
   </tr>
 </table>

<!-- tables 3 & 4 -->
  <table id="table-34">
 		<tr id="row-3">
 			<td class="data-1234">3</td>
  	</tr>
 		<tr id="row-4">
 			<td class="data-1234">4</td>
 		</tr>
	</table>

CSS

#zero-table { float: left; }
#zero-data {
	border: 1px solid black;
	height: 200px;
	width: 200px;
	text-align: center;
}
#table-12 tr {
	display: inline-block;
}
.data-1234 {
	border: 1px solid blue;
	width: 95px;
	height: 95px;
	text-align: center;
}
#table-34 tr {
	display: inline-block;
}