JSFiddle - React, Tailwind, and code Playground

by dbelle

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.7/jquery-ui.min.js"></script>
<div id="Paymenttabs">     <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">         <p>Proin  elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur  nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam  ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus  auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis  ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae  ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede  varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus  ipsum. Nunc tristique tempus lectus.</p>     </div>     <div id="tabs-2">         <p>Morbi  tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut  pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed  fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut  tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse  sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi  adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc.  Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat.  Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium  posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris  consectetur tortor et purus.</p>     </div>     <div id="tabs-3">         <p>Mauris  eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam  vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue  orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu  ad litora torquent per...

CSS

body{font-family:arial;font-size:11px;}
 .stTab1,.stTab2,.stTab3 {border:solid 1px #666;float:left;padding:3px 5px;margin-right:6px;border-radius:3px;}
 .stTab1:hover,.stTab2:hover,.stTab3:hover {background:#666;color:#fff;}
h2{font-size:18px;}

JavaScript

$('#Paymenttabs').tabs({ selected: 0, disabled: [1, 2]});



$("p").click(function() {
    if ($(this).attr("class") == "stTab1") {
        $('#Paymenttabs').tabs({ enable:0});
        $('#Paymenttabs').tabs({selected: 0, disabled: [1, 2]});
    }
    if($(this).attr("class") == "stTab2") {
        $('#Paymenttabs').tabs({ enable:1});
        $('#Paymenttabs').tabs({ selected: 1,disabled: [0, 2] });
    }
    if($(this).attr("class") == "stTab3") {
        $('#Paymenttabs').tabs({ enable:2, });
        $('#Paymenttabs').tabs({ selected: 2,disabled: [0, 1] });
  }
});