JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div id="grid">
	<div class="row">
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
	</div>
	<div class="row">
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
	</div>
	<div class="row">
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
	</div>
	<div class="row">
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
	</div>
	<div class="row">
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
	</div>
	<div class="row">
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div class="column-10"></div>
		<div...

CSS

#grid {
    border: 1px solid black;
    height: 500px;
    margin: 0 auto;
    width: 500px;
}
.column-10 {
    border: 1px solid #feefee;
    background-color: #afeafe;
    display: table-cell;
    height: 48px;
    width: 48px;
}
.column-10.active {
    background-color: #efaefa;
}

JavaScript

$('.column-10').hover(function(e){
    if (e.ctrlKey) {
        $(this).addClass('active');
    }
});
$('.column-10').click(function(e){
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
});