JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
<div class="inner">
<table style="background-color: red; width:100%; height:100%;">
    <tr style="background-color: red; width:100%; min-height:30%;">
        <td>
Name
        </td>
    </tr>
    <tr style="background-color: blue; width:100%; min-height:30%;">
        <td>
Nirman                    
        </td>
    </tr>
<tr style="background-color: blue; width:100%; min-height:30%;">
        <td>
Nirman                    
        </td>
    </tr>    
    </table>

</div>
</div>

CSS

html, body, .outer { height: 100%; background: pink }
.inner { height: 100%; background:lime }