JSFiddle - React, Tailwind, and code Playground

by mrunali tatkundawar

JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script><style type="text/css">.hide{display:none;}.show{display:block;}</style>
 <SCRIPT type=text/javascript> $(function() {  $("#tabs").tabs(); }); $('#tabs-2').bind('tabsselect', function(event, ui) {
     /* Objects available in the function context:    ui.tab     // anchor element of the selected (clicked) tab    ui.panel   // element, that contains the selected/clicked tab contents    ui.index   // zero-based index of the selected (clicked) tab    */    if (ui.index == 1) {       $("#tabs-2").click(function(){   $(".hide").switchClass('hide', 'show');    }});        </SCRIPT>
 </head>
 <body><DIV class=demo><DIV id=tabs><UL><LI><A href="#tabs-1">Buy</A></LI><LI ><A href="#tabs-2" >Sell</A></LI></UL><DIV id=tabs-1><P></P></DIV>
 <DIV id=tabs-2></DIV>
 </DIV></DIV><!-- End demo --><DIV style="DISPLAY: none" class=demo-description><P>Click tabs to swap between content that is broken into logical sections.</P></DIV><!-- End--><form id="priceBox" class="hide"><input type="text" /><input type="button" value="set price" /></form>
 </body></html>