JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cell">
    <p>Background.</p>
    <div class="overlay">
        <div class="one control">1</div>
        <div class="two control">2</div>
        <div class="three control">3</div>
        <div class="four control">4</div>
        <div class="five control">5</div>
        <div class="six control">6</div>
        <div class="seven control">7</div>
        <div class="eight control">8</div>
        <div class="nine control">9</div>
    </div>
</div>
<div class="cell">
    <p>Background.</p>
    <div class="overlay">
        <div class="one control">1</div>
        <div class="three control">3</div>
        <div class="seven control">7</div>
        <div class="eight control">8</div>
        <div class="nine control">9</div>
    </div>
</div>
<div class="cell">
    <p>Background.</p>
    <div class="overlay">
        <div class="one control">1</div>
        <div class="two control">2</div>
        <div class="four control">4</div>
        <div class="seven control">7</div>
        <div class="eight control">8</div>
    </div>
</div>

CSS

* {
    padding: 0px;
    margin: 0px;
}

body {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #FFF;
}

div.cell {
    position: relative;
    width: 150px;
    height: 150px;
    float: left;
    margin: 10px;
    background-color: #E7E7E7;
}
    div.cell p {
        color: #000;
        text-align: center;
        line-height: 150px;
    }
    div.cell div.overlay {
        display: none;
    }
    div.cell:hover div.overlay {
        display: block;
    }
        div.cell div.overlay div.control {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 50px;
            width: 50px;
            text-align: center;
            line-height: 50px;
            background-color: pink;
            cursor: pointer;
        }
        div.cell div.overlay div.control:hover {
            text-decoration: underline;
        }
        div.cell div.overlay div.control.two {
            left: 50px;
        }
        div.cell div.overlay div.control.three {
            left: 100px;
        }
        div.cell div.overlay div.control.four {
            top: 50px;
        }
        div.cell div.overlay div.control.five {
            top: 50px;
            left: 50px;
        }
        div.cell div.overlay div.control.six {
            top: 50px;
            left: 100px;
        }
        div.cell div.overlay div.control.seven {
            top: 100px;
        }
        div.cell div.overlay div.control.eight {
            top: 100px;
            left: 50px;
        }
        div.cell div.overlay div.control.nine {
            top: 100px;
            left: 100px;
        }