JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button foreground">V</div>
    <div class="button background"></div>

CSS

.button {
        position: absolute;
        width: 100px;
        height: 100px;
    }

    .background {
        z-index: 1;
        opacity: .5;
        background: hotpink;
    }

    .foreground:hover + .background {
        opacity: 1;
    }

    .foreground {
        z-index: 2;    
        
        color: white;
        font: bold 80px Arial;    
        text-align: center;
        line-height: 100px;
    }