JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div>
    <button style="float:left" onclick="leftClick();">&lt;&lt;</button>
    <button style="float:right" onclick="rightClick();">&gt;&gt;</button>
</div>
<div id="main_div">
    <table>
        <tr>
            <td>sample1</td>
            <td>sample2</td>
            <td>sample3</td>
            <td>sample4</td>
            <td>sample5</td>
            <td>sample6</td>
            <td>sample7</td>
            <td>sample8</td>
            <td>sample9</td>
            <td>sample10</td>
            <td>sample11</td>
            <td>sample12</td>
            <td>sample1</td>
            <td>sample2</td>
            <td>sample3</td>
            <td>sample4</td>
            <td>sample5</td>
            <td>sample6</td>
            <td>sample7</td>
            <td>sample8</td>
            <td>sample9</td>
            <td>sample10</td>
            <td>sample11</td>
            <td>sample12</td>
            <td>sample1</td>
            <td>sample2</td>
            <td>sample3</td>
            <td>sample4</td>
            <td>sample5</td>
            <td>sample6</td>
            <td>sample7</td>
            <td>sample8</td>
            <td>sample9</td>
            <td>sample10</td>
            <td>sample11</td>
            <td>sample12</td>
            <td>sample1</td>
            <td>sample2</td>
            <td>sample3</td>
            <td>sample4</td>
            <td>sample5</td>
            <td>sample6</td>
            <td>sample7</td>
            <td>sample8</td>
            <td>sample9</td>
            <td>sample10</td>
            <td>sample11</td>
            <td>sample12</td>
            <td>sample1</td>
            <td>sample2</td>
            <td>sample3</td>
            <td>sample4</td>
            <td>sample5</td>
            <td>sample6</td>
            <td>sample7</td>
            <td>sample8</td>
            <td>sample9</td>
            <td>sample10</td>
            <td>sample11</td>
            <td>sample12</td>
            <td>sample1</td>
         ...

CSS

div{
    width:320px;
    color:white;
}
#main_div{
    background:red;
    width:320px;
    height:250px;
    overflow:hidden;
}
table{
    background:yellow;
    width:300px;
    height:200px;
    overflow:hidden;
}
td{
    background:grey;
    border:1px solid green;
}
td:nth-child(1){
    background: sienna;
    position: absolute;
    left: 0px;
    width: auto;
    height: 99px;
    margin: 0px auto;
    padding: 0px;
    z-index: 100;
}
td:not(:nth-child(1)){
    left:52px;
    position:relative;
    z-index:0;
}