JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
    <ul>
    <li class="ui-tabs-nav-item">
        <a href="#fragment-slide-1">My vertical Tab</a>
    </li>
<li class="ui-tabs-nav-item">
    <a href="#fragment-slide-2">Lorem isoum</a>
</li>
        </ul>
<div class="ui-tabs-panel" id="fragment-slide-1" style="">
    <p>Content first Tab</p>
</div>
<div class="ui-tabs-panel" id="fragment-slide-2" style="">
    <p>Content Tab 2</p>
</div>
</div>

CSS

.tabs a {display:block;text-decoration:none;color:#555;border-bottom:1px dotted #fff;padding:5px 10px}
.tabs li {background:#ddd;}

.ui-tabs-hide {display:none}
.ui-tabs-panel {border:1px solid #ccc;background:#eee;padding:20px}
.ui-tabs-selected a{color:#000;background:#bbb}

JavaScript

$(".tabs").tabs({ fx: {opacity: 'toggle' } });