JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div>
<table class="fixed_headers">
    <thead>
        <tr>
            <th>Name</th>
            <th>Color</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>Red</td>
            <td>These are red.</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>Green</td>
            <td>These are green.</td>
        </tr>
        <tr>
            <td>Grape</td>
            <td>Purple / Green</td>
            <td>These are purple and green.</td>
        </tr>
        <tr>
            <td>Orange</td>
            <td>Orange</td>
            <td>These are orange.</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>Yellow</td>
            <td>These are yellow.</td>
        </tr>
        <tr>
            <td>Kiwi</td>
            <td>Green</td>
            <td>These are green.</td>
        </tr>
        <tr>
            <td>Plum</td>
            <td>Purple</td>
            <td>These are Purple</td>
        </tr>
        <tr>
            <td>Watermelon</td>
            <td>Red</td>
            <td>These are red.</td>
        </tr>
        <tr>
            <td>Tomato</td>
            <td>Red</td>
            <td>These are red.</td>
        </tr>
        <tr>
            <td>Cherry</td>
            <td>Red</td>
            <td>These are red.</td>
        </tr>
        <tr>
            <td>Cantelope</td>
            <td>Orange</td>
            <td>These are orange inside.</td>
        </tr>
        <tr>
            <td>Honeydew</td>
            <td>Green</td>
            <td>These are green inside.</td>
        </tr>
        <tr>
            <td>Papaya</td>
            <td>Green</td>
            <td>These are green.</td>
        </tr>
        <tr>
            <td>Raspberry</td>
            <td>Red</td>
            <td>These are red.</td>
        </tr>
        <tr>
            <td>Blueberry</td>
            <td>Blue</td>
            <td>These are...

CSS

div {
    position: relative;
}
div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    -webkit-box-shadow: inset 5px 5px 5px -2px rgba(0,0,0,.4);
    box-shadow: inset 5px 5px 5px -2px rgba(0,0,0,.4);
     pointer-events:none;
}
.fixed_headers {
    width: 100%;
    /*table-layout: fixed;*/
    border-collapse: collapse;
}

.fixed_headers th, .fixed_headers td {
    padding: 5px;
    text-align: left;
}
td:nth-child(1), th:nth-child(1) {
    width: 20%;
}
td:nth-child(2), th:nth-child(2) {
   width: 40%;
}
td:nth-child(3), th:nth-child(3) {
    width: 40%;
}
thead {
    background-color: #bbb;
    color: #fff;
}
thead tr {
    display: block;

}
tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 200px;
    -webkit-overflow-scrolling: touch;

}
tbody tr:nth-child(even) {
    background-color:#e0e0e0;
}