JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="http://mrmufflon.github.io/Leaflet.Coordinates/dist/Leaflet.Coordinates-0.1.3.min.js"></script>
<link rel="stylesheet" href="http://mrmufflon.github.io/Leaflet.Coordinates/dist/Leaflet.Coordinates-0.1.3.css">
<div id="map"></div>
<p>
x point: <span id="xpoint"></span>
</p>

<p>
y point: <span id="ypoint"></span>
</p>

CSS

#map {
  height: 500px;
}

JavaScript

function revertLat(x, y) {
	return [-y, x];
}

var map = L.map("map", {
	crs: L.CRS.Simple,
  maxBounds: [revertLat(-100, -200), revertLat(600, 600)]
}).setView([0, 0], 0);

L.marker(revertLat(0, 0)).addTo(map);
L.marker(revertLat(-100, -200)).addTo(map);
L.marker(revertLat(600, 600)).addTo(map);
L.rectangle([revertLat(-100, -200), revertLat(600, 600)]).addTo(map);

var xpoint = document.getElementById("xpoint");
var ypoint = document.getElementById("ypoint");

function showxypoint(event) {
	var point = map.project(event.latlng);
  xpoint.innerHTML = point.x;
  ypoint.innerHTML = point.y;
}

map.on("mousemove", showxypoint);

// Prevent longitude wrapping in [-180; 180]
L.Control.Coordinates.include({
	_update: function(evt) {
		var pos = evt.latlng,
			opts = this.options;
		if (pos) {
			//pos = pos.wrap(); // Prevent longitude wrapping in [-180; 180]
			this._currentPos = pos;
			this._inputY.value = L.NumberFormatter.round(pos.lat, opts.decimals, opts.decimalSeperator);
			this._inputX.value = L.NumberFormatter.round(pos.lng, opts.decimals, opts.decimalSeperator);
			this._label.innerHTML = this._createCoordinateLabel(pos);
		}
	}
});

L.control.coordinates({
  position: "bottomleft",
  labelTemplateLat: "Y (lat): {y}",
  labelTemplateLng: "X (lng): {x}",
  enableUserInput: false
}).addTo(map);