JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<h2>Cinebench</h2>
<table class="cinebench">
<thead>
<tr>
<th style="width: 8em;">Model</th>
<th style="width: 11em;">Cinebench R15</th>
<th style="width: 11em;">Cinebench R20</th>
<th style="width: 11em;">Cinebench R23</th>
</tr>
</thead>
<tbody>
<tr>
<td class="model">XPS17 9700</td>
<td class="result">1742 cb (203 cb)</td>
<td class="result">3115 cb (409 cb)</td>
<td class="result">8218 pts (1175 pts)</td>
</tr>
<tr>
<td class="model">XPS15 9500</td>
<td class="result">1093 cb (172 cb)</td>
<td class="result">2331 cb (409 cb)</td>
<td class="result">6232 pts (1041 pts)</td>
</tr>
</tbody>
</table>
<p style="font-size: 1.6rem;">*() 内はシングルコア</p>
<p>&nbsp;</p>
<h2>GeekBench</h2>
<table class="geekbench">
<thead>
<tr>
<th style="width: 8em;">Model</th>
<th style="width: 12em;">Geekbanch5(CPU)</th>
<th style="width: 14em;">Geekbench5(GPU - CUDA)</th>
</tr>
</thead>
<tbody>
<tr>
<td>XPS17 9700</td>
<td>8036 (1337)</td>
<td>73139</td>
</tr>
<tr>
<td>XPS15 9500</td>
<td>5762 (1169)</td>
<td>45226</td>
</tr>
</tbody>
</table>

CSS

body {
  background-color: black;
  color: white;
  font-size: 40px;
}

table {
  border-spacing: 0;
}

th, td {
  line-height: 2.5;
}

th {
  border-bottom: solid 4px white;
  text-align: left;
}

td {
  border-bottom: solid 2px white;
}

.model {
  text-align: left;
}

.result {
  text-align: left;
}