JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery.ui.all.css?iRand=<?= $iRand; ?>"/>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js?iRand=<?= $iRand; ?>"></script>
<div id="main-tabs">
                <ul>
                    <li><a href="#overview">Overview</a></li>
                    <li><a href="#test">Test</a></li>

                </ul>
                
                <div id="overview">
                 overview 
                </div>
                
                <div id="test">
                 <table>
                     <tr class="ui-widget-header"> 
                         <td>This</td>  
                         <td>is</td>  
                         <td>a</td>  
                         <td>test</td>  
                         <td>table</td>  
                         <td>to</td>  
                         <td>full</td>  
                         <td>up</td> 
                         <td>the</td> 
                         <td>space</td>  
                         <td>...</td>  
                         <td>...</td>   
                         <td>...</td>   
                         <td>...</td>   
                         <td>...</td>   
                         <td>...</td>   
                         <td>...</td>   
                         <td>...</td>   
                         <td>See? It gets pushed outside the tabs...</td>
                     </tr>
                    </table>
                </div>
            </div>

CSS

body
{
    font-size: 12px;
    overflow: auto;    
    padding: 5px;
}

table td
{
    border: 1px solid #EEEEEE;
    padding: 0.6em 10px;
    white-space: nowrap;
}

table
{
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;    
}

#main-tabs
{
   position: relative;
}

JavaScript

$("#main-tabs").tabs();