JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">1</a></li>
        <li><a href="#tabs-2">2</a></li>
        <li><a href="#tabs-3">3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Texto 1</p>
    </div>
    <div id="tabs-2">
        <p>Texto 2</p>
    </div>
    <div id="tabs-3">
        <p>Texto 3</p>
    </div>
</div>

CSS

#tabs { position: relative; }

.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
    text-align: right;
    height: 43px;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
    float: none;
	position: relative;
    display: inline-block;
	border-bottom-width: 0;
    margin: 0;
	padding: 0;
	white-space: nowrap;
}

JavaScript

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