JSFiddle - React, Tailwind, and code Playground

by Smartik

HTML

<table>
    <tr><td>Test</td></tr>
</table>
<button>
    Overlay 
    <div class='overlay'></div>
</button>

CSS

table {
    position: relative; /* this is required for z-index */
    background-color: white;
    height: 300px;
    width: 300px;
    z-index: 60;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
    opacity: 0.5;
	z-index: 50;
    display: none;
}
.overlay.show{
    display: block;
}

JavaScript

$('button').on('click', function() {
    $('.overlay').addClass('show');
});