JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/en/master/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js"></script>
<div id="ol3map" style="width: 400px; height: 300px;"></div>
<br>
<div id="legend_tree" style="width: 500px; height: 400px; background-color:yellow">Legend tree
</div>

JavaScript

proj4.defs("EPSG:23700", "+proj=somerc +lat_0=47.14439372222222 +lon_0=19.04857177777778 +k_0=0.99993 +x_0=650000 +y_0=200000 +ellps=GRS67 +towgs84=52.17,-71.82,-14.9,0,0,0,0 +units=m +no_defs");
var ol3_map = new ol.Map({
    target: 'ol3map',
    layers: [
    new ol.layer.Image({
        source: new ol.source.ImageWMS({
            url: 'http://mercator.elte.hu/cgi-bin/mapserv?map=/home/oktatok/saman/public_html/hu/okt/mapserver/mo.map',
            params: {
                layers: 'kozig',
                format: 'image/png'
            },
            serverType: 'mapserver'
        }),
        extent: [400000, 45000, 950000, 380000],
        showLegend: true
    })],
    controls: ol.control.defaults({
        attribution: false
    }).extend([
    new ol.control.MousePosition()]),
    view: new ol.View({
        center: [675000, 212500],
        zoom: 0,
        projection: 'EPSG:23700',
        extent: [400000, 45000, 950000, 380000],
        maxResolution: 1000
    })
})

var prova= function () {
    //var options = e || {};
    //var wmsVersion = options.wmsVersion || '1.3.0';
    //var format = options.format || 'image/png';
    var legendP= document.getElementById('legend_tree');
    var legendDiv = document.createElement('div');
    //legendDiv.className = options.class + ' ol-unselectable';
    legendP.appendChild(legendDiv);
   var legendImg = document.createElement('img');
            //legendImg.src = url + '&version=' + wmsVersion + '&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=' + layers[i].getSource().getParams().layers + '&format=' + format;
   legendImg.src = "http://193.204.22.2:80/cgi-bin/mapserv.exe?map=C:/ms4w/apps/openlayers-3.16.0/mapfile_shapedibase.map&SERVICE=WMS&VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=carta_tessitura";
            legendDiv.innerHTML='prova2 <br>';
            legendDiv.appendChild(legendImg);
};
prova();