JSFiddle - React, Tailwind, and code Playground

by Moo

HTML

<!DOCTYPE html>
<!--

-->
<html lang="en">
    <head>               
        <link type="text/css" rel="stylesheet" href="css/styletime.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/init.js"></script> 
    </head>

    
    <body>
         <section id="heady">
             <div style="width:1000px;margin-left:auto;margin-right:auto;">         
                <div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:28px;"><b><a href="index.html"></b></a></p></div>

                <div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">    
                        <!--<a href="profile.html">Home</a> | 
                        <a href="index.html">Generic</a> |
                        <a href="index.html">Elements</a> | -->
                </div>
             </div>
        
        </section>
        
        <section id="wrapper">
            <br><br>
            <!--<img src="images/blacksquare.png" width="525" height="197"></img>-->
            <div style="float:left;padding:0px 0px;font-size:14px;">Left...</div>
            <div style="float:right;padding:0px 0px;font-size:14px;">...Right</div>
            
            <br><br>


            <div class="LeftPanel">
               
    
                
               
                <div style="vertical-align:top;display:inline-block;float:left;">        
                    <ul class="navbar cf">
                        <!-- <li><a href="#">item 2</a></li> -->
                        <li style="width:200px;">
                            <a href="#" class="ActiveListItem">Category</a>
                            <ul>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                     ...

CSS

/*adder*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);

 
 * {
    padding:0;
    margin:0;
}


html {
 background:#FFFFFF;                                /*Back Colors*/
}


body {
    /*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}


a {
	color: #34495e;
	text-decoration: none;
}
a:active, a:hover {
	text-decoration: underline;
}



#heady {
    text-align: center;
    width:100%;
    height:75px;
    background-color:#FFFFFF;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:#000000;
    position:relative; 
    /*background:url('http://wallpaperupdate.com/Images/product/plaid-wallpaper-kxeo-l.jpg');*/
}

#wrapper {
    text-align: center;
    width:1000px;
    height:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    position:relative; 
}


#feety {
    text-align: center;
    width:100%;
    height:100px;
    background-color:darkslateblue;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:white;
    position:relative; 
}



.LeftPanel{
    float:left;
    width:465px;

}



.RightPanel{
    float:right;
    width:465px;

}



.InterestContainer{
    height:374px;
    width:460px;
    background:none;
    vertical-align:top;
    /*border-color:#000;
    border-width:1px;
    border-style:solid;
    border-radius:4px;*/    
}


.mousescroll {
    overflow-x:hidden;
    overflow-y:auto;
}

/*
.mousescroll {
    overflow:hidden;   
}

.mousescroll:hover {
    overflow-y:scroll;
}*/



/* clearfix */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of...

JavaScript

// sub menus identification
$(function() {
    
    
    
    
  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
  	$('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){		
	$('.navbar li ul').slideToggle(300);
  });    
});


    

                  
                  
                  
                  
                  
//newList

$(document).ready(function() {	
	
	var ul = $('.lister ul'),
		input = $('input'),
        CategoryIcon;


	input.focus();	
    
    $(document).on('click', 'input.onX', function()
                  {
                      
                      //alert(1);
                      
                     if (input.val() !== '') {
	        var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();

            if (activeNumber == "1") {
                CategoryIcon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iTunes.png" width="15" height="15"></img>';
            } else {
            CategoryIcon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-Icon-round-Question_mark.jpg" width="15" height="15"></img>';
            }
            

	        ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');
	        if (ul.hasClass('inactive')) {
	        	ul.removeClass('inactive')
	        		.addClass('active');
            
	        }
	    };
	    input.val('');
	    return false;
                      
                  });
    

	$('form').submit(function () {
	    if (input.val() !== '') {
	        var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();

            if (activeNumber == "1") {
                CategoryIcon = '<img...