JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js "></script>
Ordnance Survey Projection 27700 with proj4js 2.3.x and OpenLayers 2.13.x
<div id="map"></div>27700: <span id="div27700"></span> 
<br />3857: <span id="div3857"></span> 
<br />4326: <span id="div4326"></span>

CSS

html, body {
    width:100%;
    height:100%;
    margin: 0px !important;
}
#map {
    width:100%;
    height:70%;
}
.olControlMousePosition {
    background: rgba(255, 255, 255, 0.7);
}

JavaScript

//proj4.defs("EPSG:27700", '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717' +
//' +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs');

window.Proj4js = {
    Proj: function (code) {
        return proj4(Proj4js.defs[code]);
    },
    defs: proj4.defs,
    transform: proj4
};



Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs ";

console.log(Proj4js.defs["EPSG:27700"]);

//OpenLayers.Projection.get('EPSG:27700').setExtent([0, 0, 800000, 1400000]);
//OpenLayers.Projection.get('EPSG:27700').setWorldExtent([-10, 49, 6, 63]);/
//OpenLayers.Projection.get('EPSG:27700').setGlobal(false);
//OpenLayers.Projection.get('EPSG:27700').setGetPointResolution(function
//(resolution) { return resolution; });

var map;


var geographic = new OpenLayers.Projection('EPSG:4326');
var mercator = new OpenLayers.Projection('EPSG:3857');
osgb = new OpenLayers.Projection("EPSG:27700");
//console.log(osgb);


map = new OpenLayers.Map("map", {
    projection: mercator
});

// Add The layer swticher     
map.addControl(new OpenLayers.Control.LayerSwitcher());

// Add A Scale Bar

map.addControl(new OpenLayers.Control.ScaleLine());

// Add Mouse Cursor Posistion
map.addControl(
new OpenLayers.Control.MousePosition({
    div: document.getElementById('div27700'),
    prefix: '<a target="_blank" ' +
        'href="http://spatialreference.org/ref/epsg/27700/">' +
        'EPSG:27700</a> coordinates: ',
    separator: ' | ',
    numDigits: 2,
    displayProjection: osgb,
    emptyString: 'Mouse is not over map.'
}));

map.addControl(
new OpenLayers.Control.MousePosition({
    div: document.getElementById('div3857'),
    prefix: '<a target="_blank" ' +
        'href="http://spatialreference.org/ref/epsg/3857/">' +
        'EPSG:3857</a> coordinates: ',
    separator: ' | ',
    numDigits: 2,
    displayProjection: 'EPSG:3857',
    emptyString: 'Mouse is not over...