JSFiddle - React, Tailwind, and code Playground

HTML

<table class="tabela" cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
    <tbody>
        <tr class="ui-state-active" align="center">
            <th rowspan="2">Part</th>
            <th rowspan="2">Number</th>
            <th colspan="6">Details</th>
        </tr>
        <tr class="ui-state-active" align="center">
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
            <th>All</th>
        </tr>
        <tr class="Row">
            <td class="rotate" rowspan="9"><div>First part of my grid</div></td>
            <td>Row1</td>
            <td>618</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>618</td>
        </tr>
        <tr class="AlternatingRow">
            <td>Row2 and its description</td>
            <td>20</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>20</td>
        </tr>
        <tr class="Row">
            <td>Row3</td>
            <td>611</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>651</td>
        </tr>
        <tr class="AlternatingRow">
            <td>Row4</td>
            <td>73</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>73</td>
        </tr>
        <tr class="Row">
            <td>Row5</td>
            <td>1078</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>1078</td>
        </tr>
        <tr class="AlternatingRow">
            <td>Row6</td>
            <td>38</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>38</td>
        </tr>
        <tr class="Row">
            <td>Row7</td>
            <td>63</td>
           ...

CSS

.tabela {
    font-variant: small-caps;
    margin: 0 auto;
    text-align: right;
}
.tabela th, .tabela tr td {
    border: 1px solid #efefef;
}
.tabela th {
    padding: 5px;
}
.ui-widget-content {
    color: #ffffff;
}
.ui-widget {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1em;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #aaaaaa;
    background: #000000 url(images/ui-bg_highlight-hard_65_000000_1x100.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #ffffff;
}
.Row {
    border: 1px solid #333333;
    background-color: #FFFFFF;
    cursor: default;
    padding: 3px;
    padding-top: 2px;
    padding-bottom: 1px;
    font-family: Verdana;
    font-size: 8pt;
    color: #000000;
    text-align: right;
}
.AlternatingRow {
    border: 1px solid #333333;
    padding: 3px;
    padding-top: 2px;
    padding-bottom: 1px;
    font-family: Verdana;
    font-size: 8pt;
    text-align: right;
    color: #000000;
    background-color: #FFFFCC;
    cursor: default;
}
td.rotate div {
    vertical-align: middle;
    text-align: center;
    font-size: 12px;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}