JSFiddle - React, Tailwind, and code Playground

by otopse

HTML

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="Tab1" style="padding:20px;display:none;">
            tab1
        </div>
        <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
            tab2
        </div>
        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="display:none;">
            tab3
        </div>
    </div>

CSS

.custom-header
{
margin: 0;
padding: 5px;
text-align: center;
font-size: 0.875em;
}

.custom-header span
{
color: #484848;
font-size: 0.875em;
vertical-align: middle;
}

.widget
{
width: 500px;
height: 300px;
}


.custom-header
{
padding: 2px 5px 10px 5px;
}

JavaScript

$('#tt').tabs({
        border:false,
        onSelect:function(title){
            alert(title+' is selected');
        }
    });
    // add a new tab panel
    $('#tt').tabs('add',{
        title:'New Tab',
        content:'Tab Body',
        closable:true,
        tools:[{
            iconCls:'icon-mini-refresh',
            handler:function(){
                alert('refresh');
            }
        }]
    });    
        // get the selected tab panel and its tab object
    var pp = $('#tt').tabs('getSelected');
    var tab = pp.panel('options').tab;    // the corresponding tab object