JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://svn.osgeo.org/metacrs/proj4js/branches/proj4js-1.0/lib/proj4js-combined.js"></script>
<div id="map" style="width: 500px; height: 400px;"></div>
<span id="mousepos"></span>

JavaScript

Proj4js.defs["EPSG:2154"] = "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";

var map = new OpenLayers.Map({
        div: "map",
       
        controls:[
                new OpenLayers.Control.LayerSwitcher({'ascending':false}),
                new OpenLayers.Control.ScaleLine({
                    'geodesic': "true"
                }),
                 new OpenLayers.Control.Navigation(),
                 new OpenLayers.Control.KeyboardDefaults(),
                 new OpenLayers.Control.MousePosition(
                     {displayProjection: new OpenLayers.Projection("EPSG:2154"),
                     div: document.getElementById('mousepos'),
                     prefix: 'Coordinates: ',
                     suffix: ' (in <a href="http://spatialreference.org/ref/epsg/' 
                    + '2154/">EPSG:2154</a>)'}
                 )
                ]
        });

var osm = new OpenLayers.Layer.OSM();

map.addLayer(osm);
map.zoomToMaxExtent();