JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.css">
<div id="ol3map" style="width: 400px; height: 400px; border: 1px solid black;"></div>

CSS

.ol_legend {
    bottom: 0px;
    left: 0px;
    position: absolute;
    background-color: #FFFFFF;
}

JavaScript

var item = 'cow<sup>2</sup>';

var map = new ol.Map({
    target: 'ol3map',
     view: new ol.View({
        center: [0, 0],
        zoom: 10,
        projection: 'EPSG:4326',
    })
});


        
var sFunc = function (feat, res) {
            var htmlElem = document.createElement('span');
            htmlElem.innerHTML = feat.get('label');
            for (var i=0;i<htmlElem.children.length;i++) {
                var child = htmlElem.children[i];
                if (child.tagName === 'SUP') {
                    if (child.textContent <= 3 && child.textContent > 1) {
                        child.textContent = String.fromCharCode(child.textContent.charCodeAt(0) + 128);
                    } else if (child.textContent > 3 && child.textContent <= 9) {
                        child.textContent = String.fromCharCode(child.textContent.charCodeAt(0) + 8256);
                    }
                }
            }

        }

var styleLayer = new ol.style.Style({
                text: new ol.style.Text({
                    offsetY: -10,
                    font: '18px Calibri,sans-serif',
                    text: sFunc,
                    //text: htmlElem.textContent,
                    fill: new ol.style.Fill({
                        color: '#ec971f'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#fff',
                        width: 3
                    })
                })
            });

var layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.Point([0, 0]),
                label: item
            })]
        }),
        style:new ol.style.Style({
                text: new ol.style.Text({
                    offsetY: -10,
                    font: '18px Calibri,sans-serif',
                    text: sFunc,
                    //text: htmlElem.textContent,
                    fill: new ol.style.Fill({
        ...