JSFiddle - React, Tailwind, and code Playground
by alcosbarco
HTML
<!doctype html>
<html lang="en">
<style>
.Clearboth
{
clear: both;
}
.divright
{
float:right;
}
.divleft
{
float:left;
}
</style>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$( "#tabs" ).tabs();
});
</script>
<script src="http://www.instinctcoder.com/wp-content/uploads/2014/02/tabnavi.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
Tab 1
</div>
<div id="tabs-2">
Tab 2
</div>
<div id="tabs-3">
Tab 3
</div>
</div>
<div class="Footer">
<div class="divleft">
<button id="btnMoveLeftTab" type="button" value="Previous Tab" text="Previous Tab">Previous Tab
</button>
</div>
<div class="divright">
<button id="btnMoveRightTab" type="button" value="Next Tab" text="Next Tab">Next Tab
</button>
</div>
</div>
<div class="Clearboth"></div>
</body>
</html>