JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tableContainer">
<table class="all-table">
                        <colgroup>
                        <col  style="width:30px;" />
                        <col  style="width:30px;" />
                        <col style="width:180px;" />
                        <col style="width:180px;" />
                        <col style="width:180px;" />
                        <col style="width:30px;" />
                    </colgroup>
    <thead>
    <tr>
        <td class="td-fixed gray-background">a</td>
        <td class="td-fixed td-fixed-margin gray-background">a</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
    </tr>
            <tr>
        <td class="td-fixed gray-background">a</td>
        <td class="td-fixed td-fixed-margin gray-background">a</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
    </tr>
        </thead>
    <tbody>
        <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background" >a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        </tr>
            <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td >aaaaaaaaaaaa</td>
        <td >aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
    </tr>
                    <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td >aaaaaaaaaaaa</td>
        <td >aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
       ...

CSS

#tableContainer {
    width: 300px;
    overflow:auto;
    overflow-y: scroll;
} 
.td-fixed {
        position: fixed;
    left:0px;
    width:30px;
        z-index:1;
        height:25px;
    }
    .white-background{
        background-color:white;
    }
.gray-background{
background-color:gray;
}
    .td-fixed-margin{
        margin-left:31px;
    }
    .td-fixed-padding{
        padding-left:31px;
}
.all-table {
    width: 300px;
    margin-top: 0;
    table-layout: fixed;
    border-spacing: 0;
}
td {
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  height: 25px;
  padding: 0;
  overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
}

    .td-editable-position{
        left:148px;
        position:relative;
    }