JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.css">
<div class="pusher">
    <main id="main-view">
        <div id="main-tabs" class="ui top attached pointing secondary menu">
            <a id="first"  class="item" data-tab="first">
                Tab 1  <i class="small close icon"></i>
            </a>
            <a id="second" class="item" data-tab="second">
                Tab 2 <i class="small close icon"></i>
            </a>
            <a id="third"  class="item" data-tab="third">
                Tab 3 <i class="small close icon"></i>
            </a>
        </div>

        <div id="main-content">
            <div id="first" class="ui bottom attached tab" data-tab="first">
                First
            </div>

            <div id="second" class="ui bottom attached tab" data-tab="second">
                Second
            </div>

            <div id="third" class="ui bottom attached tab" data-tab="third">
                Third
            </div>
        </div>
    </main>
</div>

JavaScript

var $mainView = $mainView || {
    $ct: $('#main-view'),

    init: function() {        
        var that = this;

        that.$tabs = $('#main-tabs', that.$ct); 
        that.$content = $('#main-content', that.$ct);

        //make tabs sortable and attach close event`
        that.$tabs
            .on('click', '> .item > .close', function(event) { //close button clicked
                event.stopPropagation();
                event.preventDefault();

                that.closeTab( $(this).closest('.item').attr('id') );
            });

        //init current tabs
        that.$tabs.find('> .item').tab( that.getTabParameters() );

        that.selectFirstTab();
    },

    selectFirstTab: function() {
        this.selectTab( this.$tabs.find('> .item').first().attr('id') );
    },

    isTabSelected: function(id) {
        return this.$tabs.find('> #'+id).hasClass('active');
    },

    getTabParameters: function() {
        return {
            context: this.$ct,
            cache: true,
            onTabInit: function(tabPath, parameterArray, historyEvent) {
                console.log('Initialized tab: ' + tabPath);
            },
            onTabLoad: function(tabPath, parameterArray, historyEvent) { //tab selected
                console.log('Selected tab: ' + tabPath);
            }
        };
    },

    selectTab: function(id) {
        if(!id) {
            return ;
        }

        //activate the tab
        this.$tabs.find('> #'+id).click();
    },

    openTab: function() {
        var that = this;

        var tabId = (new Date()).getTime();

        that.$content.append(
            '<div id="' + tabId + '" class="ui bottom attached tab loading" data-tab="' + tabId + '"></div>'
        );

        that.$tabs
            .append(
                '<a id="' + tabId + '" class="item" data-tab="' + tabId + '">'+
                    'Test ' + tabId + '<i class="small close icon"></i>'+
                '</a>'
            )
            .find('>...