JSFiddle - React, Tailwind, and code Playground

by vend3tta

HTML

<table class="b-table">
    <tr>
        <td class="b-cell">Make me inactive!</td>
        <td class="b-cell">And me too ^^</td>
    </tr>
    <tr>
        <td class="b-cell">Make me inactive, блеать!</td>
        <td class="b-cell">Inactive, plz :/</td>
    </tr>
</table>

CSS

* {
    box-sizing: border-box
    }
.b-table {
    width: 80%;
    margin: 50px auto;
    border-collapse: separate;
    border-spacing: 3px
    }
.b-cell {
    width: 50%;
    padding: 4px 8px;
    border: 1px solid #ccc   
    }
    .b-cell_overlayed {
        position: relative
        }

.b-cell__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    filter: aplha(opacity=50);
    background: #000;
    z-index: 999
    }

JavaScript

$(document).ready(function() {
    $('.b-cell').click(function(event) {
        if (!$(this).hasClass('b-cell_overlayed')) {
            $(this).addClass('b-cell_overlayed')
            app = document.createElement('div');
            $(app).addClass('b-cell__overlay').appendTo($(this))
        } else {
            $(this).find('b-cell__overlay').remove()
            $(this).removeClass('b-cell_overlayed')
        }
                console.log(event.target)
    })
})