JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons">
   <ul>
       <li id="0">button0</li>
       <li id="1">button1</li>
       <li id="2">button2</li>
       <li id="3">button3</li>
   </ul>
</div>
<div id="image">
    
    <div id="reveal">
        <div id="overlay1"></div>
        <div id="overlay2"></div>
        <div id="overlay3"></div>
        <div id="overlay4"></div>
        <img src="http://science.nasa.gov/media/medialibrary/2010/03/31/sn_remnant_n63a.jpg/image_thumb" height="128" width="128"/>
    </div>
</div>

CSS

#image{
        width: 128px;
        height: 128px;
        position: relative;
    }
    #overlay1{    
        width:50%;
        height:50%;
        background-color:white;
        z-index: 10;
        position: absolute;
    }
#overlay2{
      width:50%;
        height:50%;
        background-color:white;
        z-index: 1000;
        position: absolute;
        right: 0;
}
#overlay3{
      width:50%;
        height:50%;
        background-color:white;
        z-index: 100;
        position: absolute;
        right: 0;
        bottom:0;
}
#overlay4{
      width:50%;
        height:50%;
        background-color:white;
        z-index: 10;
        position:absolute;
        left:0;
        bottom:0;
}

ul li{
    cursor:pointer;
    
}

JavaScript

jQuery(function(){
       
    jQuery('#0').click(function(){
        jQuery('#overlay1').toggle();
    });
    jQuery('#1').click(function(){
        jQuery('#overlay2').toggle();
    });
    jQuery('#2').click(function(){
        jQuery('#overlay3').toggle();
    });
    jQuery('#3').click(function(){
        jQuery('#overlay4').toggle();
    });
       
       });