JSFiddle - React, Tailwind, and code Playground

HTML

<table class="tabHeight">
    <tr>
        <td class="tdwidth">hey1</td>
        <td class="tdwidth">hey1</td>
    </tr>
    <tr>
        <td class="tdwidth">hey2</td>
        <td class="tdwidth">hey1</td>
    </tr>
    <tr>
        <td class="tdwidth">hey3</td>
        <td class="tdwidth">hey1</td>
    </tr>
    <tr>
        <td class="tdwidth">hey4</td>
        <td class="tdwidth">hey1</td>
    </tr>
    <tr>
        <td class="tdwidth">hey5</td>
        <td class="tdwidth">hey1</td>
    </tr>
    <tr>
        <td class="tdwidth">hey6</td>
        <td class="tdwidth">hey1</td>
    </tr>
    <tr>
        <td class="tdwidth">hey7</td>
        <td class="tdwidth">hey1</td>
    </tr>
</table>
<div class="wrap">
    <table class="tabHeight1">
        <tr>
            <td class="tdwidth">hey1</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey2</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey3</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey4</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey5</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey6</td>
            <td class="tdwidth">hey1</td>
        </tr>
        <tr>
            <td class="tdwidth">hey7</td>
            <td class="tdwidth">hey1</td>
        </tr>
    </table>
</div>

CSS

.tabHeight {
    max-height:100px;
    width:100%;
    overflow-y:auto;
    padding:2px;
    color:orange;
    border: 2px solid black;
}
.tdwidth {
    width:50%
}
.wrap {
    max-height: 100px!important;
    overflow: auto;
    border: 2px solid black;
}
.tabHeight1 {
    width:100%;
    overflow-y:auto;
    padding:2px;
    color:blue;
}
.tdwidth {
    width:50%
}