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 / 0.12) + " relY: " + (relY / 0.12));
});