JSFiddle - React, Tailwind, and code Playground

by Kamal Agarwal

HTML

<div style="float:left;width:200px;border:1px solid lightgray;margin:0px 23px;"><!--leftmenu-->
    <ol id="menu">
     <li>
        <a href="home.php#" id="ds1">Wingardium</a>
        <img class="wings" src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;float:right;"/>
        <div class="box" style="margin:6px 0px;">
          <a href="home.php?id=1">Wingardium1</a><br>
	      <a href="home.php?id=2">Wingardium2</a>
        </div>
	 </li>
	
     <li>
        <a href="home.php#" id="ds2">Data streams</a>
        <img class="wings" src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;float:right;"/>
        <div class="box" style="margin:6px 0px;">
          <a href="home.php?id=1">Stream1</a><br>
	      <a href="home.php?id=2">Stream2</a>
        </div>
	 </li>
	</ol>
  </div>

  <div style="float:left;width:800px;border:1px solid lightgray;margin:0px 23px;"><!--rightmenu-->
    <ul id="tabs">
       <li><a id="tab1">Wingardium</a></li>	  
       <li><a id="tab2">Data streams </a></li>	      
    </ul>
	<div class="container" id="tab1C">Wingardium content
	 
	</div>
	<div class="container" id="tab2C">Data streams content

	</div>
  </div>

CSS

ol#menu {  margin:0px 10px; padding:0;  text-align:left; }
    ol#menu li { position:relative; list-style-type:none; border-bottom:1px solid #efefef; padding:7px 0;}
    ol#menu .current { border-bottom:4px solid #3d496a;}
    ol#menu li:hover { border-bottom:4px solid #3d496a;}
    ol#menu li a { padding:0px 0px; text-decoration:none; color:#68759c;}  
    ol#menu li a:hover { color:#8895b8; border:none; }

    .wings { width:200px; float:left; padding:0px 0px; }
    .box { width:195px; /* display:none;*/ margin:14px 0px; }

	#tabs { width:100%; height:30px; border-bottom:solid 1px #CCC; padding-right:2px; margin-top:10px; }
    #tabs li { float:left;  list-style:none;  border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; margin-right:5px; 
               border-top-left-radius:3px; border-top-right-radius:3px; outline:none; }
    #tabs li a { font-family:calibri; font-size:15px; color:#5685bc; padding-top:5px; padding-left:7px; padding-right:7px; padding-bottom:8px; 
	             display:block; 
             background: #FFF; border-top-left-radius:3px;  border-top-right-radius:3px; text-decoration:none; outline:none; }
    #tabs li a.inactive { padding-top:3px; padding-bottom:8px; padding-left:8px; padding-right:8px; color:#666666; background:#EEE; outline:none;
                      border-bottom:solid 1px #CCC; } 
    #tabs li a:hover, #tabs li a.inactive:hover { color:#5685bc; outline:none; }

    .container { clear:both; width:99%; border:0px solid #CCC; padding-top:2px; margin:0 auto; }  
    .container ul { margin-left:25px; font-size:small; line-height:1.4; list-style-type:disc; }
    .container li { padding-bottom:5px; margin-left:5px;}

JavaScript

$ (document).ready(function()
    {
       $ (".wings").click(function(event)
       {
         $(".box").slideUp("slow");
         if ($(this).next().is(":hidden") == true)
         {
           $(this).next().slideDown("slow");
         }
         return false;
       });

       $('#menu li a').click(function(e){
           e.preventDefault();
           ind = $(this).parents('li').index()

           if(ind == 0)
           { $('.container:first').html('Wingardium content '+ $(this).text())
               $('#tabs li:first').click()
           }
           else
           { 
               $('.container:last').html('Data streams content '+ $(this).text())
               $('#tabs li:eq(1)').click();
           }

           return false;
           })
       //(".box").hide("slow");
    });

    //--RIGHT_MENU TAB SCRIPT----//
    $ (document).ready(function() 
    {    
      $('#tabs li a:not(:first)').addClass('inactive');
      $('.container').hide();
      $('.container:first').show();

      $('#tabs li').click(function()
      {
        var t = $('a',this).attr('id');
        if($('a',this).hasClass('inactive'))
        { //this is the start of our condition 
          $('#tabs li a').addClass('inactive');         
          $('a',this).removeClass('inactive');
          $('.container').hide();
          $('#'+ t + 'C').fadeIn('slow');
        }
        return false;
     });
    });