JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.4/themes/base/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a>
        </li>
        <li><a href="#tabs-2">Proin dolor</a>
        </li>
        <li><a href="#tabs-3">Aenean lacinia</a>
        </li>
    </ul>
    <div id="tabs-1">
        <ol start="50">
            <li>Bibendum Elit</li>
            <li>Vehicula</li>
            <li>Amet Bibendum Ultricies</li>
        </ol>
    </div>
    <div id="tabs-2">
        <ol>
            <li>Sollicitudin Cras Vehicula</li>
            <li>Vulputate Euismod</li>
            <li>Ridiculus Vehicula Pharetra Nullam</li>
        </ol>
    </div>
    <div id="tabs-3">
        <ol>
            <li>Ullamcorper Parturient</li>
            <li>Tristique Mollis Venenatis Vehicula</li>
            <li>Vulputate Bibendum</li>
        </ol>
    </div>
</div>
<div id="empty"></div>

CSS

ol {
    margin: 1em;
    margin-left: 2em;
}
ol li {
    list-style: decimal outside;
}

JavaScript

$(function() {
    $( "#tabs" ).tabs({
        select: function(event, ui){
            var ol = $($(ui.panel).children()[0]);
            setTimeout(function(){
            ol.children().css("counter-reset", "item")
             }, 1);
        }
    });
});