JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<section>
    <li class="tall" id="logos"><a class="dark" href=""><span>Logos</span></a></li>
    <li class="wide" id="illustrations"><a class="dark" href=""><span>Illustrations</span></a></li>
    <li class="wide" id="drawings"><a href=""><span>Drawings</span></a></li>
    <li class="small" id="web"><a href=""><span>Web</span></a></li>
    <li class="small narrow"  id="print"><a href=""><span>Print</span></a></li>
        <li class="small" id="other"><a class="dark" href=""><span>Other</span></a></li>
</section>

CSS

section {
    height:200px;
    width:600px;
}


li {
    list-style:none;
    display:block;
    float:left;
    height:47%;
    margin-bottom:2%;
    position:relative;
}
a {
    outline:0;
    height:100%;
    width:100%;
    display:block;
    color:black;
    text-decoration:none;
    position:relative;
    top:0;
    left:0;
    box-shadow:0px 0px 0px 0px rgb(0,0,0);
    transition: all 100ms ease-in;
    background-color:inherit;
    border-color:inherit;
}
span {
    display:block;
    position:absolute;
    top:50%;
    margin-top:-15px;
    width:100%;
    text-align:center;
    font-family:Calibri;
    font-size:22px;
    font-weight:100;
}


a:before, a:after {
    content:'';
    position:absolute;
    border-style:solid;
    border-width:2px;
    transition: all 100ms ease-in;
    z-index:-1;
}
a:after {
    top:0; right:0;
    border-left-color:rgba(0,0,0,0.2);
    border-bottom-color:rgba(0,0,0,0.2);
    border-right-color:transparent;
    border-top-color:transparent;
}
a:before {
    bottom:0px; left:0px;
    border-left-color:transparent;
    border-bottom-color:transparent;
    border-right-color:rgba(0,0,0,0.2);
    border-top-color:rgba(0,0,0,0.2);
}
li:before, li:after {
    content:'';
    position:absolute;
    border-style:solid;
    border-width:2px;
    transition: all 100ms ease-in;
    z-index:-2;
}
li:after {
    top:0; right:0;
    border-left-color:inherit;
    border-bottom-color:inherit;
    border-right-color:transparent;
    border-top-color:transparent;
}
li:before {
    bottom:0px; left:0px;
    border-left-color:transparent;
    border-bottom-color:transparent;
    border-right-color:inherit;
    border-top-color:inherit;
}



li:hover a, a:focus {
    top:-4px;
    left:-4px;
    box-shadow:4px 4px 0px 0px rgba(0,0,0,0.2);
    
}
li:hover:after {
    top:-4px;

}
li:hover:before {
    left:-4px;

}
li:hover a:after {
    right:-4px;
}
li:hover a:before {
    bottom:-4px;
}




.tall {
    height:100%;
   ...