JSFiddle - React, Tailwind, and code Playground

by Louis Walch

HTML

<div id="wrapper">
    <div><a href="#"></a></div>
    <div><a href="#"></a></div>
    <div><a href="#"></a></div>
    <div><a href="#"></a></div>
    <div><a href="#"></a></div>
    <div><a href="#"></a></div>    
</div>

CSS

BODY,HTML {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#wrapper {
    background-color: red;
    width: 100%;
    height: 100%;
}
#wrapper DIV {
    background-color: white;
    height: 50%;
    width: 33.3%;
    float: left;  
    position: relative;
    box-shadow: inset 2px 2px 3px 0 rgba(0,0,0,0.1);  
}

#wrapper DIV A {
    display: block;
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0;
    right: 0;
            transition-property: all;
            transition-duration: 600ms;
            transition-timing-function: ease-out;

    background-color: white;
    box-shadow: inset 2px 2px 3px 0 rgba(0,0,0,0.1);  


}
#wrapper DIV.active A { 
    /*background-color: blue;  */
}

#wrapper DIV.expand A {
            top: -15px; 
            bottom: -15px;
            left: -15px;
            right: -15px;
}

#wrapper DIV.animate_in {
    z-index: 20;
} 


#wrapper DIV.dim, #wrapper DIV.dim A {
    background-color: #ccc;
}

JavaScript

$(document).ready(function() {


    var cells = $('DIV');
    var links = $('A');
        
    var hoverOn = function() {
        
        var cell = $(this);
        
        cell.removeClass('dim');
        cell.addClass('expand active animate_in');
                
        cells.not(cell).addClass('dim');
        
    };

    var hoverOff = function() {
        var cell = $(this);
        cell.removeClass('expand active animate_in');

    };   
    
    cells.hover(hoverOn, hoverOff);
        
});