JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rec" id="d1"></div>
<div class="rec" id="r1"></div>
<div class="rec" id="r3"></div>

CSS

.rec {
    height: 100px;
    width: 125px;
}
#d1 {
    background : lightgreen;
    border: 2px solid black;
    display: inline-block;
    left: 0%;
}
#r1 {
    background : red;
    border: 2px solid black;
    display: inline-block;
    left: 10%;
    position: relative;
}
#r3 {
    background : white;
    border: 2px solid black;
    display: inline-block;
    left: 20%;
    position: relative;
}

JavaScript

// Get the divs with class = "rec" and once clicked, run the function inside. The function inside will open a new window with that given link.
$(".rec").click(function () {
    window.open("http://www.google.com");
});

// Mouse event for mouse hover. When you mouse over, this will expand the square. In the first function, it firstly increases the size, and this function serves for mouse-over. The second function serves for mouse-out, meaning when you aren't hovering anymore, and it sets the size to the original.
$(".rec").hover(function() {
    $(this).height(200);
    $(this).width(250);
}, function() {
    $(this).height(100);
    $(this).width(125);
});