JSFiddle - React, Tailwind, and code Playground

HTML

<a  id="thank" href="#"><section>thank</section></a>
<a id="you" href="#"><section >you</section></a>
<a id="bro" href="#"><section >bro</section></a>

CSS

#thank, 
#you,
#bro {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #ddd;
    text-align: center;
    line-height: 200px;
    color: #000;
    font-size: 20px;
    transition: all 0.3s 0s;
}

a { border: 2px solid red; }

section:hover { background: #333; color: #fff; }

#thank { left: 0px; bottom: 0px; }
#you { left: 50%; top: 50%; margin: -100px 0px 0px -100px; }
#bro { right: 0px; bottom: 0px; }