JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr><td>Sample</td><td>First </td></tr>
    <tr><td>Autumn</td><td>Summer</td></tr>
    <tr><td>PC</td><td>Apple</td></tr> 
    <tr><td>Sun</td><td>the Moon</td></tr>
    <tr><td>PHP</td><td>Javascript</td></tr>
    <tr><td>Sunday</td><td>Monday</td></tr>
    <tr><td>Working</td><td>Not working</td></tr>
    <tr><td>Hello</td><td>World</td></tr>
</table>

<p>Why isn't the <strong>max-height</strong> property working?</p>

CSS

table{
    max-height:30px;
    background:#eee;
    margin:30px;
    overflow-y:scroll;
    border:2px solid #ccc;
}

table tr{
    border-bottom:1px solid #fff;
}

table td{
    padding:10px;
}

p{
    margin:30px;
}