JSFiddle - React, Tailwind, and code Playground
HTML
<div class="ui-widget">
<!-- Tabs -->
<h2 class="demoHeaders">
Codes</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">GT2</a></li>
<li><a href="#tabs-2">GT3</a></li>
<li><a href="#tabs-3">GT4</a></li>
</ul>
<div id="tabs-1">
<div id="container">
<div id="questionActions">
Phasellus mattis tincidunt nibh. Cras orci urna, bl
</div>
<!-------------------------------------------ADD CONTENT BELOW THIS LINE---------------------------------------->
<!-----------------------------------------------Slide 1----------------------------------------------->
<div class="content" id="slide1">
<div class="slideText">
<strong>Nam dui erat, auctor a</strong><br />
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet
ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum
bibendum.
</div>
</div>
</div>
</div>
<div id="tabs-2">
Phasellus
</div>
<div id="tabs-3">
Nam dui erat,
</div>
</div>
</div>
CSS
#container
{
width:99%;
height:93%
}
#questionActions
{
width:99%;
height:20px;
padding:5px;
margin-bottom:1%;
color:white;
background-color:#005293;
}
JavaScript
$(function() {
$( "#tabs" ).tabs();
});