JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<a id="ss-grid" href="#">
    <div id="ss-grid-box1" class="grid-box"></div>
    <div id="ss-grid-box2" class="grid-box"></div>
    <div id="ss-grid-box3" class="grid-box"></div>
    <div id="ss-grid-box4" class="grid-box"></div>
</a>

CSS

#ss-grid {
    position: relative;
    display: block;
    width: 25px;
    height: 25px;
}

.grid-box {
    position: absolute;
    width: 40%;
    height: 40%;
    border: 1px solid #666;
    background-color: #ccc;
    background-image: -moz-linear-gradient(top,
        rgba(255,255,255,0.6),
        rgba(255,255,255,0.4) 5%,
        rgba(255,255,255,0.0) 50%,
        rgba(255,255,255,0.1));
    background-image: -webkit-gradient(linear, left top, left bottom,
        from(rgba(255,255,255,0.6)),
        color-stop(0.05, rgba(255,255,255,0.4)),
        color-stop(0.5, rgba(255,255,255,0.0)),
        to(rgba(255,255,255,0.1)));
    box-shadow: 0px 1px 1px rgba(0,0,0,.2);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,.2);
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.2);
    -webkit-transition: all 0.2s ease-out;  
     -moz-transition: all 0.2s ease-out;  
    -o-transition: all 0.2s ease-out;  
    transition: all 0.2s ease-out;  
}

#ss-grid-box1 { top: 0; left: 0 }
#ss-grid-box2 { top: 0; right: 0 }
#ss-grid-box3 { bottom: 0; left: 0 }
#ss-grid-box4 { bottom: 0; right: 0 }

#ss-grid:hover .grid-box {
    background-color: #bbb;
}