JSFiddle - React, Tailwind, and code Playground

by lithium182

HTML

<div id='main'>
<div id='coverDiv'>
    <table>
        <thead>
            <tr>
                <th>111</th><th>222</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>aaa</td><td>aaa</td>
            </tr>
            <tr>
                <td>bbb</td><td>bbb</td>
            </tr>
            <tr>
                <td>ccc</td><td>ccc</td>
            </tr>
        </tbody>
    </table>
</div>
<div id ='covedDiv2'>
<table>
        <thead>
            <tr>
                <th>333</th><th>444</th><th>555</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>fff</td><td>fff</td><td>fff</td>
            </tr>
            <tr>
                <td>ggg</td><td>ggg</td><td>ggg</td>
            </tr>
            <tr>
                <td>hhh</td><td>hhh</td><td>hhh</td>
            </tr>
        </tbody>
    </table>
    </div>
</div>

CSS

td, th {
    border: 1px solid black;
}

#coverDiv {
    z-index: 1;
    position: absolute;
    left:0px;
    top:0px;
    opacity: 1 !important;
}
#main {
    overflow: hidden;
}

#covedDiv2 {
    z-index: 0;
    position: absolute;
    left:0px;
    top:0px;
    opacity: 0.5;
}