JSFiddle - React, Tailwind, and code Playground

HTML

<li><a href="#"><p>1</p></a></li>
<li><a href="#"><p>2</p></a></li>
<li><a href="#"><p>3</p></a></li>

CSS

li{
    list-style:none;
    margin:10px; 
    width:100px;
    height:50px;
}
a {
    display:block;
    background:#F00;
    color:#000;
    width:100px;
    height:50px;
    font-size:1.5em;
    text-decoration: none;
}
a:active {
    background:#0f0;
}
p{
    text-align:center;
    display:block;
    margin:0 auto;
    width:50px;
    background:#f3f3f3;
}