JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1"><a href="#">DIV1</a></div>
<div class="box2"><a href="#">DIV2</a></div>
<div class="box3"><a href="#">DIV3</a></div>

CSS

body{background-color: green;}
     .box1{
        width:150px;
        height:100px;
        background-color: white;
        float: left;
        text-align: center;
        padding-top:60px;
        margin-left:10px;
        
    }
    .box1 a{color: yellow;}
    .box1 a:hover:after{
    content:"";
    background:yellow;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:-1
}
     .box2{
        width:150px;
        height:100px; 
        background-color: white;
        float: left;
        text-align: center;
        padding-top:60px;
        margin-left:10px;
        
    }
    .box2 a{color: blue;}
    .box2 a:hover:after{
    content:"";
    background:blue;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:-1
}
     .box3{
        width:150px;
        height:100px;
        background-color: white;
        float: left;
        text-align: center;
        padding-top:60px;
        margin-left:10px;
        
    }
    .box3 a{color: black;}
    .box3 a:hover:after{
    content:"";
    background:black;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:-1
}
    a{
        font-size: 30px;
        text-decoration: none;
    
    }