JSFiddle - React, Tailwind, and code Playground
HTML
<div id="product-tabs">
<div class="techspecs" id="productspec">
<table cellspacing="4" cellpadding="13">
<tbody>
<tr class="display">
<th class="title">
<h2>Id</h2>
</th>
<td class="column-divider"> </td>
<td class="split last-column" colspan="2">
<p>P_00110</p>
</td>
<td class="column-divider"> </td>
<th class="title">
<h2>Name</h2>
</th>
<td class="column-divider"> </td>
<td class="split last-column" colspan="2">
<p>Product_01</p>
</td>
</tr>
<tr class="display">
<th class="title">
<h2>Weight</h2>
</th>
<td class="column-divider"> </td>
<td class="split last-column" colspan="2">
<p>25kg</p>
</td>
<td class="column-divider"> </td>
<th class="title">
<h2>Category</h2>
</th>
<td class="column-divider"> </td>
<td class="split last-column" colspan="2">
<p>CAT_001</p>
</td>
</tr>
<tr class="display">
<th class="title">
<h2>Quantity</h2>
</th>
<td class="column-divider"> </td>
<td class="split last-column" colspan="2">
<p>500</p>
</td>
<td class="column-divider"> </td>
...
CSS
.techspecs h3 { margin-bottom:5px; font-size:1em; }
.techspecs p.intro { font-size:1em; margin-bottom:15px; }
.techspecs .caption { font-size:0.8571em; line-height:1.3333em; color:#888; }
.techspecs table { margin-top:40px; *margin-top:30px; border-collapse:separate; color:#000; }
.techspecs th.title,
.techspecs thead th.title { vertical-align:top; width:210px; padding:15px 10px 30px 5px; border-left:1px solid transparent; border-top:1px solid #e6e6e6; }
.techspecs th.title h2 { display: inline; margin-left: 10px; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 24px; color: #5d5d5d; text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
vertical-align: middle; }
.techspecs td { vertical-align:top; width:127px; padding:15px 25px 30px; border-right:1px solid #e5e5e5; border-top:1px solid #e6e6e6; }
.techspecs td.last-column { border-right:1px solid transparent; width:auto; }
.techspecs td.full-span { width:662px; border-right:1px solid transparent; }
.techspecs td.split { width:305px; }
.techspecs td.split p{ font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #888; }
.techspecs th.column-divider,
.techspecs td.column-divider { width:5px; padding:15px 20px 30px}
.techspecs td.column-divider { border:none; }
.techspecs td.row-divider { padding-bottom:8px; border:none; }
.techspecs tr.configurable td { padding-bottom:0; }
.techspecs tr.configurable-options td { border-top-color:transparent; padding-top:0; }
.techspecs table ul { margin-bottom:15px; }
.techspecs table ul li { margin-bottom:10px; }
.techspecs table ul.nospace li { margin-bottom:2px; }
.techspecs table ul.disc { margin-top:5px; margin-left:18px; list-style-type:disc; }
.techspecs table .hdsize {
display:inline-block; padding:8px 13px; margin-bottom:15px; border:2px solid #7f7f7f; font-size:1.2em; color:#252525;
-webkit-border-radius:8px; -moz-border-radius:8px; -o-border-radius:8px; border-radius:8px;
}
.techspecs table .included-software-grid .caption { color:#000;...