JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Полиграфия</label>
<div class="content">
<p>
<table class="tg" style="table-layout: fixed; width: 299px; float:left; ">
<colgroup>
<col style="width: 145px">
<col style="width: 49px">
<col style="width: 54px">
<col style="width: 51px">
</colgroup>
<tr>
<th class="tg-mysd" rowspan="2">ТИП ПРОДУКЦИИ</th>
<th class="tg-j1h2" colspan="3">ЦЕНА</th>
</tr>
<tr>
<td class="tg-g8f1">USD</td>
<td class="tg-g8f1">RUB</td>
<td class="tg-a0td">UAH</td>
</tr>
<tr>
<td class="tg-031e">Билборд</td>
<td class="tg-s6z2">100</td>
<td class="tg-s6z2">3500</td>
<td class="tg-s6z2">1200</td>
</tr>
<tr>
<td class="tg-031e">Буклет</td>
<td class="tg-s6z2">40</td>
<td class="tg-s6z2">1400</td>
<td class="tg-s6z2">480</td>
</tr>
<tr>
<td class="tg-031e">Флаер</td>
<td class="tg-s6z2">30</td>
<td class="tg-s6z2">1050</td>
<td class="tg-s6z2">360</td>
</tr>
<tr>
<td class="tg-031e">Дисконт карты</td>
<td class="tg-s6z2">30</td>
<td class="tg-s6z2">1050</td>
<td class="tg-s6z2">360</td>
</tr>
<tr>
<td class="tg-031e">Визитки</td>
<td class="tg-s6z2">5</td>
<td class="tg-s6z2">175</td>
<td class="tg-s6z2"></td>
</tr>
</table>
</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Закладка №2</label>
<div class="content">
<p>
<table class="tg" style="table-layout: fixed; width: 530px">
<colgroup>
<col style="width: 216px">
<col style="width: 95px">
<col style="width: 119px">
<col style="width: 100px">
</colgroup>
<tr>
<th class="tg-y5uk">Содержане <br>пакетов</th>
<th class="tg-xloo">эконом. <br>пакет</th>
<th class="tg-xloo">стандарт.<br>пакет</th>
<th class="tg-xloo">премиум<br>пакет</th>
</tr>
<tr>
<td class="tg-031e">Логотип</td>
<td class="tg-s6z2">+</td>
<td class="tg-s6z2">+</td>
<td class="tg-s6z2">+</td>
</tr>
<tr>
<td class="tg-031e">Цветовая палитра</td>
...
CSS
.tabs {
position: relative;
min-height: 350px;
font-family: calibri;
color: #404C59;
}
.tab {
float: left;
}
.tab label {
background:#ccc;
;
position: relative;
left: 1px; padding: 10px; background-color: #E6E6E6;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
left: 0;
background: #FAFAFA;
right: 0;
margin-top: 10px;
padding:10px;
display: none;
}
[type=radio]:checked ~ label {
background: #FAFAFA;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
display: block;
}
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
.tg .tg-j1h2{font-size:x-large;font-family:"Lucida Console", Monaco, monospace !important;;text-align:center}
.tg .tg-a0td{font-size:100%}
.tg .tg-mysd{font-size:18px;font-family:"Lucida Console", Monaco, monospace !important;;text-align:center}
.tg .tg-g8f1{font-size:100%;text-align:center}
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
.tg .tg-y5uk{font-weight:bold;font-style:italic;font-size:large;text-align:center}
.tg .tg-xloo{font-weight:bold;font-style:italic;font-size:medium;background-color:#f2cf44;text-align:center}