JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
</head>
<body>
<div id="top" onclick="top();"></div>
<div id="middle"></div>
<div id="footer"></div>
<div id="overlay"></div>
</body>

CSS

body {
    height: 100%;
    width: 100%;
}

#top {
    background-color: #efefef;
    height: 100px;
    width: 100%;
}

#middle {
    background-color: #CCCCCC;
    height: 200px;
    width: 100%;
}
#footer {
    background-color: pink;
    height: 200px;
    width: 100%;
}
#overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: yellow;
    top: 0px;
    opacity: 0.4;
}

JavaScript

$("#top").click(function() {
        alert("top");
    });
        
    $("#middle").click(function() {
        alert("middle");
    });
    $("#footer").click(function() {
        alert("footer");
    });