JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css">
<script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
<head>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v4.6.5/build/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v4.6.5/css/ol.css">
  <link rel="stylesheet" href="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.css" />
<script type="text/javascript" src="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<div id="map" class="map"></div>

CSS

body {
    padding: 0;
    margin: 0;
  }
  html, body, #map {
    height: 100%;
    width: 100%;
  }
  .ol-attribution ul{
    font-size: 1.7rem;
  }
  .ol-custom-overviewmap,
      .ol-custom-overviewmap.ol-uncollapsible {
        bottom: 1px;
        left: 1px;
        right: auto;
        top: auto;
      }

      .ol-custom-overviewmap:not(.ol-collapsed)  {
        border: 1px solid black;
      }

      .ol-custom-overviewmap .ol-overviewmap-map {
        border: none;
        width: 400px;
      }

      .ol-custom-overviewmap .ol-overviewmap-box {
        border: 2px solid red;
      }

      .ol-custom-overviewmap:not(.ol-collapsed) button{
        bottom: 1px;
        left: 1px;
        right: auto;
        top: auto;
      }

      .ol-rotate {
        top: 170px;
        right: 0;
      }
      .ol-scale-line {
        position: absolute;
        left: 47%;
      }
      .ol-viewport .ol-scale{
        position: absolute;
        left: 47.5%;
      }

      #Shade{
        position: absolute;
    left: 10px;
    top: 70px;
      }
      hideOpacity .layerswitcher-opacity 
    { display:none;
    }
    .hideOpacity .ol-layerswitcher .layerup
    { height: 1.5em;
    }
    .showPercent .layerSwitcher .ol-layerswitcher .layerswitcher-opacity-label {
      display: block;
    }

    .ol-header > div 
    { width:100%; 
    }
    .toggleVisibility
    { padding-left: 1.6em;
      cursor: pointer;
      border-bottom: 2px solid #369;
      margin-bottom: 0.5em; 
    }
    .toggleVisibility:before
    { background-color: #fff;
      border: 2px solid #369;
      box-sizing: border-box;
      content: "";
      display: block;
      height: 1.2em;
      left: 0.1em;
      margin: 0;
      position: absolute;
      width: 1.2em;
    }
    .toggleVisibility.show:before
    { background: #369;
    }
    .ol-control.ol-layerswitcher {
    position: absolute;
    right: 0em;
    text-align: left;
    margin: 5px;
    top: 0em;
    max-height: calc(100% - 6em);
   ...

JavaScript

var osm = new ol.layer.Tile(
          { title: "Map",
            baseLayer: true,
            source: new ol.source.OSM()
          });
var googleLayerRoadmap=new ol.layer.Tile({
          title: "Google Road Map",
          visible: false,
          source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}' }),
        });
        var googleLayerSatellite =new ol.layer.Tile({
          title: "Google Satellite",
          baseLayer: true,
          visible: false,
          source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=s&hl=pl&&x={x}&y={y}&z={z}' }),
        });
        var center = ol.proj.transform([23.4046863, 49.3621607], 'EPSG:4326', 'EPSG:3857');
        var view = new ol.View({
          center: center,
          zoom: 9
        });
        var overviewMapControl = new ol.control.OverviewMap({
        // see in overviewmap-custom.html to see the custom CSS used
        className: 'ol-overviewmap ol-custom-overviewmap',
        layers: [osm],
        collapseLabel: '\u00BB',
        label: '\u00AB',
        collapsed: true,
        zoom: 14
      });
        var layers = [googleLayerSatellite,osm,googleLayerRoadmap]
var map = new ol.Map({
  layers: layers,
  target: 'map',
  view: view,
  controls: ol.control.defaults().extend([
  overviewMapControl,
  new ol.control.LayerSwitcher()
        ])
});
let switcher = new ol.control.LayerSwitcher(
    { target:$(".layerSwitcher").get(0), 
      // displayInLayerSwitcher: function (l) { return false; },
      show_progress:true,
      extent: true,
      trash: true,
      oninfo: function (l) { alert(l.get("title")); }
    });
        // Add a new button to the list 
  switcher.on('drawlist', function(e){
    let layer = e.layer;
    $('<div>').text('?')// addClass('layerInfo')
      .click(function(){
        alert(layer.get('title'));
      })
      .appendTo($('> .ol-layerswitcher-buttons', e.li));
  });
  let button = $('<div class="toggleVisibility"...