JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
        <div class="inner"></div>
        <div class="inner2"></div>
        <div class="inner3"></div>
        <div class="inner"></div>
    </div>

CSS

.outer {
        width: 304px;
        height: 304px;
        background-color: black;
    }
    .inner {
        float: left;
        width: 150px;
        height: 150px;
        background-color: red;
        border: 1px solid black;
        display: none;
    }
    .inner2{
       background-color: pink;
    }
     .inner3{
       background-color: white;
    }
    .outer:hover .inner {
        display: block;
    }