JSFiddle - React, Tailwind, and code Playground

HTML

<div id="game">  
    <div id="pic1"></div>
    <div id="pic2"></div>
    <div id="pic3"></div>
    <div id="pic4"></div>
    <div id="pic5"></div>
<input type="image" value="Click" src="#" />
        <div class="hidden_div"></div>
</div>

CSS

#game {width:520px; height:200px; background:#b1b1b1; border:solid 1px #000;}
#game input {width:120px; height:50px; margin:20px 0 0 180px; border:solid 1px #000000;}

#pic1 { width:80px;
        height:90px; 
        border:solid 1px #000000; 
        display: inline-block; 
        margin:10px 0 0 7px;
        }
#pic2 { width:90px;
        height:90px;  
        border:solid 1px #000000; 
        display: inline-block; 
        margin:10px 0 0 7px;
        }
#pic3 {width:90px;
        height:90px;  
        border:solid 1px #000000; 
        display: inline-block; 
        margin:10px 0 0 7px;
        }
#pic4 { width:90px;
        height:90px; 
        border:solid 1px #000000; 
        display: inline-block; 
        margin:10px 0 0 7px;
        }
#pic5 { width:90px;
        height:90px; 
        border:solid 1px #000000; 
        display: inline-block; 
        margin:10px 0 0 7px;
        }

div.hidden_div {
    background:greenyellow;
    width:500px;
    height:300px;
    display:none;
    position:absolute;
}

JavaScript

$(document).ready(function() {
    $(":image").click(function() {
        $("div.hidden_div").slideToggle(300);
    });
});