JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<tr>
<table align="left" class="table" style="width:10%">
<tr>
<th align="center" bgcolor="#def2d9" colspan="3">1 STARTER</th>
</tr>
<tr>
<th></th>
<th>Users</th>
<th></th>
</tr>
<tr>
<td>M00</td>
<td align="center">1</td>
<td>Base Package</td>
</tr>
<tr>
<td>SP40</td>
<td align="center">NA</td>
<td>Training</td>
</tr>
<tr>
<td align="left" colspan="3">
<p class="left">
<b>PRICE:</b>
<span class"right" align="right">9 900,00€<br>+<br>131,67€<br>Monthly Subscription</span>
</td>
</tr>
</table>
</tr>
<tr>
<table align="left" class="table" style="width:15%" "float:left">
<tr>
<th align="center" bgcolor="#ffe5d5" colspan="3">2 PRODUCTION BASICS</th>
</tr>
<tr>
<th></th>
<th>Users</th>
<th></th>
</tr>
<tr>
<td>M00</td>
<td align="center">1</td>
<td>Base Package</td>
</tr>
<tr>
<td>M12a</td>
<td align="center">up to 3</td>
<td>Technical Drawings</td>
</tr>
<tr>
<td>M13</td>
<td align="center">up to 3</td>
<td>BOM</td>
</tr>
<tr>
<td>V-PRO</td>
<td align="center">1</td>
<td>Cutting Optimization Drawings</td>
</tr>
<tr>
<td>SP60</td>
<td align="center">NA</td>
<td>Training</td>
</tr>
<tr>
<td align="left" colspan="3">
<p class="left">
<b>PRICE:</b>
<span class="right" align="right">17 650,00€<br>+<br>244,17€<br>Monthly Subscription</span>
</td>
</tr>
</table>
</tr>
<tr>
<table align="left" class="table" style="width:15%" "float:left">
<tr>
<th align="center" bgcolor="#fff4ca" colspan="4">3 PRODUCTION MACHINES</th>
</tr>
<tr>
...
CSS
.table, th, td {
border: solid #000000;
border-collapse: collapse;
border-width: 3px;
margin-right: 10px;
}
.th, td {
border-width: 3px;
font-family: Open Sans;
}
.right {
float: right;
}
.left {
text-align: left;
}