JSFiddle - React, Tailwind, and code Playground

HTML

<div class="debug"></div>

<div class="container">
    <div class="crazyWide zoomOut">
        <div class="markYCenter"></div>
        <div class="markXCenter"></div>
    </div>
</div>

CSS

.container { 
    width: 100%; 
    overflow:hidden; 
    height:275px; 
    border:1px solid green; 
    position:relative;
}
.crazyWide { 
    width: 4000px; 
    background:red; 
    height:650px; 
    position:absolute; 
    left:-50%;
    top:4%;
}
.markXCenter {
    position: relative;
    width: 10px;
    height: 100%;
    background: black;
    left: 50%;
}
.markYCenter {
    position: relative;
    width: 100%;
    height: 10px;
    background: black;
    top: 50%;
}
.zoomOut { 
       transform: matrix(0.12, 0, 0, 0.12, -1145, -180)
}

.debug { position: absolute; bottom: 0px; background:purple; height:50px; width:250px; color:white; font-weight: bold;}

JavaScript

$(".crazyWide").click(function(e){
   var clickPos = $(this).offset(); 

   var relX = e.pageX - clickPos.left;
   var relY = e.pageY - clickPos.top;
   
   //Used to display current click coords
   $(".debug").empty();
   $(".debug").prepend("relX: " + relX + " relY: " + relY);
});