JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<div id="map" class="map"></div>

CSS

#id {
  width: 640px;
  height: 480px;
}

JavaScript

proj4.defs("EPSG:3395","+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs");
ol.proj.get('EPSG:3395').setExtent(
  [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
);

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Tile({
      opacity: 0.9,
      extent: [
          2047800.24508882355,
          5586452.183179816,
          2847800.24508882355,
          6386452.183179816
      ],
      source: new ol.source.XYZ({
          url: 'http://vec01.maps.yandex.net/tiles?l=map&x={x}&y={y}&z={z}',
          projection: 'EPSG:3395'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    maxZoom: 18,
    center: [2447800.24508882355, 5986452.183179816],
    zoom: 6,
    projection: 'EPSG:3857'
  })
});