JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "wrapper">
        <div id="box_a"></div>
        <div id="box_b"></div>
        <div id="box_c"></div>
        <div id="box_d"></div>
    </div>
    <p id = "status"></p>

CSS

.wrapper {
        display: table;
        position: relative;
        margin: 0 auto;
    }

    #status {
        text-align: center;
    }

    .wrapper > div {
        height: 100px;
        width: 100px;
        float: left;
        background-color: red;
    }

    .wrapper > div:nth-of-type(2) {
        background-color: blue;
    }

    .wrapper > div:nth-of-type(3) {
        background-color: yellow;
        clear: left;
    }

    .wrapper > div:nth-of-type(4) {
        background-color: green;
    }

    .wrapper:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .wrapper:hover:before {
        display: none;
    }

JavaScript

$(".wrapper > div").click(function(e) {
        $("#status").html("You have clicked " + $(this).attr("id") + ".");
    });