JSFiddle - React, Tailwind, and code Playground

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

li {
    position:relative;
    background:pink;
    top:0;
    left:0;
    transition:all 100ms ease-in;
}
li:hover {
    top:-4px;
    left:-4px;
}
li:hover:before, li:hover:after {
    opacity:1;
}
li:before, li:after {
    content:'';
    display:block;
    position:absolute;
    opacity:0;
    transition:opacity 100ms ease-in;
}
li:after {
    height:100%;
    right:-4px;
    top:0;
    border-top:4px solid white;
    border-left:4px solid black;
}
li:before {
    width:100%;
    height:4px;
    top:100%;
    border-left:4px solid white;
    border-top:4px solid black;
}
section {
    height:200px;
    width:600px;
}
li {
    list-style:none;
    display:block;
    float:left;
    height:47%;
    margin-bottom:2%;
}
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;
}
span {
    display:block;
    position:absolute;
    top:50%;
    margin-top:-15px;
    width:100%;
    text-align:center;
    font-family:Calibri;
    font-size:22px;
    font-weight:100;
}
//Sizes .tall {
    height:100%;
    width:32%;
}
.wide {
    width:32%;
    margin-left:2%;
}
.small {
    margin-left:2%;
    width:21%;
}
.small.narrow {
    width:20%;
}
.dark {
    color:white;
}
//Colors #logos {
    background-color:rgb(242, 25, 44);
}
#illustrations {
    background-color:rgb(41, 90, 95);
}
#drawings {
    background-color:rgb(139, 181, 143);
}
#web {
    background-color:rgb(187, 222, 189);
}
#print {
    background-color:rgb(239, 243, 210);
}
#other {
    background-color:rgb(242, 25, 44);
}