JSFiddle - React, Tailwind, and code Playground
by Andy Blueman
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab1</a></li>
<li><a href="#tabs-2">Tab2</a></li>
<li><a href="#tabs-3">Tab3</a></li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
</div>
CSS
body {
font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 65%;
margin:0;
}
#dialog label, #dialog input {
display:block;
}
#dialog label {
margin-top: 0.6em;
}
#dialog input, #dialog textarea {
width: 95%;
}
#tabs {
margin-top: 0em; padding: 0px;
}
#tabs li .ui-icon-closethick {
float: left;
margin: 0.3em 0.3em 0 0;
cursor: pointer;
}
#add_tab {
cursor: pointer;
margin: 0.3em 0.3em 0 0;
}
.uloutline {
outline: 0px solid green;
}
#buttonZ {
float:right;
outline: 0px solid grey;
}
.clearZ {
clear:both;
outline: 0px solid red;
}
/*-----------------------------------------*/
#tabs .ui-tabs-nav {
background: transparent;
border-width: 0px 0px 1px 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#tabs .ui-tabs-panel {
margin: 0.0em 0.0em 0.0em 0.0em;
}
.ui-tabs-panel { padding: 0px !important; }
#tabs .ui-tabs-nav li {
margin-top: 0.2em;
font-size: 100%;
min-width: 90px;
}
#tabs .ui-tabs-nav li.ui-tabs-selected, #tabs .ui-tabs-nav li.ui-state-active {
margin-top: 0.2em;
font-size: 100%;
}
.ui-button-text {
font-size: 75%;
}
.ui-icon-closethick {
float: left;
margin: 0.3em 0.3em 0 0;
cursor: pointer;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {font-size: 12px !important;}
.mce-path {padding: 5px 10px !important;}
.mce-wordcount {padding: 5px 16px !important;}
.mce-btn button {padding: 1px 10px !important;}
#mceu_13, #mceu_46, #mceu_79 { border: 0px !important;}
JavaScript
$(function() { $( "#tabs" ).tabs(); });