JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <h1>Dynamic Tabs Demo</h1>        
    <div id="Container">
        <!-- Dynamically add a tab container with tabs here. -->                            
    </div>
    <script language="javascript" type="text/javascript">
        function LoadDynamicTabsFaulty()
        {
            alert('Loading');
            var DynamiclyBuiltTabContainer = $('<div>').attr({id: 'MyDynamicTab'}).addClass('tabs').tabs();
            var Tab1 = $('<div>').attr({id: 'Tab1'}).append($('<p>').text('Tab 1 Content'));
            var Tab2 = $('<div>').attr({id: 'Tab2'}).append($('<p>').text('Tab 2 Content'));
            var Tab3 = $('<div>').attr({id: 'Tab3'}).append($('<p>').text('Tab 3 Content'));
        
            DynamiclyBuiltTabContainer.tabs('add', '#' + Tab1.attr('id'), 'Tab With ID ' + Tab1.attr('id'));
            $('#Container').append(DynamiclyBuiltTabContainer);
            alert('Done Loading');
        }        
        function LoadDynamicTabsWorking()
        {
            alert('Loading');
            // Nick Kusters; 2012-07-17; Important here is to add the 'ul' element because if the existing tab container is empty, the .tabs function will not add it itself, causing the .add function to fail.
            var DynamiclyBuiltTabContainer = $('<div>').attr({id: 'MyDynamicTab'}).append($('<ul>')).addClass('tabs').tabs();
            var Tab1 = $('<div>').attr({id: 'Tab1'}).append($('<p>').text('Tab 1 Content'));
            var Tab2 = $('<div>').attr({id: 'Tab2'}).append($('<p>').text('Tab 2 Content'));
            var Tab3 = $('<div>').attr({id: 'Tab3'}).append($('<p>').text('Tab 3 Content'));
        
            DynamiclyBuiltTabContainer.tabs('add', '#' + Tab1.attr('id'), 'Tab With ID ' + Tab1.attr('id'));
            $('#Container').append(DynamiclyBuiltTabContainer);
            alert('Done Loading');
        }
        LoadDynamicTabsFaulty();
    </script>
</body>
</html>

JavaScript

function LoadDynamicTabs()
{
    alert('Loading');
    var DynamiclyBuiltTabContainer = $('<div>').attr({id: 'MyDynamicTab'}).addClass('tabs').tabs({ cookie: { expires: 30} });
    var Tab1 = $('<div>').attr({id: 'Tab1'}).append($('<p>').text('Tab 1 Content'));
    var Tab2 = $('<div>').attr({id: 'Tab2'}).append($('<p>').text('Tab 2 Content'));
    var Tab3 = $('<div>').attr({id: 'Tab3'}).append($('<p>').text('Tab 3 Content'));

    DynamiclyBuiltTabContainer.tabs('add', '#' + Tab1.attr('id'), 'Tab With ID ' + Tab1.attr('id'));
    $('#Container').append(DynamiclyBuiltTabContainer);
}