JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainbackground">
        <img src="http://placehold.it/600x150" id="mainbackgroundimage"/>
        
        
            <!-- 6 divs for hover/clickable areas -->
            <div id="infojarne">
                <img src="http://placehold.it/150x150" id="inforjaneImg">
            </div>
            <div id="paintings">
                <img src="http://placehold.it/150x150" id="paintingsImg">    
            </div>
            <div id="etc">
                <img src="http://placehold.it/150x150" id="etcImg">
            </div>
            <div id="projects">
                <img src="http://placehold.it/150x150" id="projectsImg">
            </div>
            <div id="digitalart">
                <img src="http://placehold.it/150x150" id="digitalartImg">
            </div>
            <div id="drawings">
                <img src="http://placehold.it/150x150" id="drawingsImg">
            </div>
            
    </div>

JavaScript

$("document").ready(function(){

    function ImageDimensions (width, height, x, y, id){
        this.width = width;
        this.height = height;
        this.x = x; 
        this.y = y;
        
        if(id){
            var $div = $(id);
            $div.css("z-index", "1");
            if(id == "#etc"){
                $div.css("right", "0px");
                $div.css("bottom", "0px");    
            }else{
                $div.css("left", this.x +"px");
                $div.css("top", this.y +"px");
            }
            
            $div.css("width", this.width +"px");
            $div.css("height", this.height +"px");
            $div.hover(
                function(event){
                    $div.find("img").show();
                },
                function(event){
                    $div.find("img").hide();
                }
            );
            $div.click(function(){
                var location;
                if($div.attr("id") == "infojarne"){
                    $(window.location).attr('href', 'infojarne.html');
                }if($div.attr("id") == "digitalart"){
                    $(window.location).attr('href', 'digitalart.html');
                }else{
                    console.info("unknown id : " + id);
                }
            });
            var $imgObj = $(id+ " img");
            $imgObj.hide();
        }
    };
    
    var background = new ImageDimensions(836, 638);
    // TODO on resize recalc this + reposition
    var windowWidth = $(window).width();
    console.info("windowWidth:" + windowWidth);
    var leftMargin = (windowWidth - background.width) /2;
    console.info("left margin:" + leftMargin);
    
    $("#mainbackground").css("left",leftMargin+"px");
    $("#mainbackground").css("z-index","0");

    
    var infojarne = new ImageDimensions(413, 200, 149, 0, "#infojarne");
    var drawings = new ImageDimensions(272, 138, 0 ,200, "#drawings");
    var digital = new ImageDimensions(276, 172, 0, 338,...