JSFiddle - React, Tailwind, and code Playground
HTML
<button id="toggle-shadow">
Toogle shadow
</button>
<div id="fields">
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div class="field"></div>
<div...
CSS
#fields {
width: 500px;
height: 500px;
}
.field {
width: 10%;
height: 10%;
overflow: hidden;
float: left;
text-align: center;
color: #ccc;
position: relative;
cursor: pointer;
background: #fff;
}
.field:hover {
box-shadow: inset 0px 0px 100px 0px rgba(255, 0, 0, 0.3) !important;
}
JavaScript
jQuery(function() {
jQuery("#toggle-shadow").click(function() {
jQuery('.field').each(function() {
if(jQuery(this).css("box-shadow") == 'none') {
jQuery(this).css("box-shadow", "inset 0px 0px 100px 0px rgba(0, 0, 0, 0.3)");
} else jQuery(this).css("box-shadow", "none");
});
});
});