JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div id="container">
    <div id="title">Title</div>
    <table>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
        <tr><td>content</td></tr>
    </table>
</div>

CSS

html
{
}    
body 
{
   overflow-y:hidden;
   overflow-x:hidden;
}

#container
{ 
    height:100%;
    overflow-x:hidden;
    overflow-y:scroll;
}

#Title
{

   padding-bottom: 10px;
}

table
{
   width: 100%;
   table-layout: fixed; 
}

#container::-webkit-scrollbar
{
   background: transparent;
   width: 12px;
} 

#container::-webkit-scrollbar-track 
{
   -webkit-box-shadow: inset 0 0 6px rgba(10,11,12,0.3);
  /*  border-radius: 10px; */
}

#container::-webkit-scrollbar-thumb 
{
    border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background:rgba(104,102,102,0.8);
}