JSFiddle - React, Tailwind, and code Playground

by TrySpace

HTML

<DIV id="uberDIV">
    <DIV id="mainGrid">
    
        <DIV class="blocky">
           <DIV class="blocky">
            Block 1
            </DIV>
        </DIV>
        <DIV class="blocky">
           <DIV class="blocky">
            Block2
            </DIV>
        </DIV>
        <DIV class="blocky">
           <DIV class="blocky">
            Block 3
            </DIV>
        </DIV>
    </DIV>
</DIV>
<DIV class="faderClass">
</DIV>

CSS

DIV
{
    z-index: 99;
    
}

DIV#uberDIV
{
    
    height: 99%;
    width: 99%;
    
}
DIV#mainGrid
{
    position: absolute;
    border: 4px dashed #AAA;
    overflow: hidden;
    height: 80%;
    width: 100%;
    top: 0%;
    left: 0%;
}

DIV.blocky
{
    position: relative;
    border: 1px dashed #AAA;
    
    height: 20%;
    width: 100%;
    top: 0%;
    left: 0%;
    
}

.faderClass
{
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    
    width: 100%;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -moz-opacity:0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    
    display: none;
    z-index: 100;

}

JavaScript

$('.blocky').on('dblclick', zoomClicks );
$('.faderClass').on('click', killFader );
    
function zoomClicks()
{
$(this).css('background-color', 'green');
$(this).css(
        {
            width: '80%',
            height: '30%',
            left: '100px',
            top: '100px',
            zIndex: '101'

        });
    

$('.faderClass').fadeIn();
    $('.faderClass').css('height', '100%');

}    
function killFader()
{
    $('.faderClass').fadeOut();
}