JSFiddle - React, Tailwind, and code Playground

HTML

<div  style="overflow: scroll; overflow-x:hidden; position:relative; width: 100%; height:100%; background: magenta">
    <table class="data_container"  style="width:100%;">
        <tr>
            <td style="height:400px">How can I fix my margins?</td>
        </tr>
    </table>
</div>

CSS

.data_container
        {
            border-color: black;
            border-style: solid;
            border-width: 2px;
            background-color: white;
            margin: 50px !important;
            font-size: smaller;
        }