JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    			<div class="ui-widget-header ui-corner-top">
    				<ul>
    					<li><a href="#tabs-1">My Databases</a></li>
    					<li><a href="#tabs-2">Database Stats</a></li>
    				</ul>
    			</div>
    			
    			<div id="tabs-1" class="tabs3">
    				<p>Database stats</p>
    			</div>
    			
    			<div id="tabs-2" class="tabs3">
    				<p>You could not be registered due to a system error. We apologize for any inconvenience.</p>
    			</div>
    </div>

CSS

#main {
   position: relative;
	padding: 0;
}


#main ul, .tabs3 {
   white-space: nowrap;
}

#main ul{
   border-bottom: medium none;
   //padding: 6px;
	height: 25px;
	border: none;
}

.ui-tabs .ui-tabs-nav {
   margin: 0;
   padding: 0.2em 0.2em 0;
	border: none;
}

.ui-tabs .ui-tabs-nav li {
    border: none;
	margin: 0 0 -5px 0;
}

#main ul.ui-widget-header, #main ul.ui-widget-content, #main ul.ui-state-default, #main ul.ui-state-hover {
    background: none;
    border: none
}

#main .ui-tabs-active a {
   -moz-border-bottom-colors: none;
   -moz-border-left-colors: none;
   -moz-border-right-colors: none;
   -moz-border-top-colors: none;
   background: url("images/ui-bg_highlight-hard_100_f9f9f9_1x100.png") repeat-x scroll 50% top #F9F9F9;
   border-color: #CCCCCC;
   border-image: none;
   border-style: solid;
   border-width: 1px 1px 0;
   color: #222222;
   position: relative;
   z-index: 5;
}

JavaScript

$("#main").tabs();