JSFiddle - React, Tailwind, and code Playground

by UI Designer

HTML

<section id="heady">
            <div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b><a href="index.html">Site</b></a></p></div>
            
            <div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">    
					<a href="index.html">Home</a> | 
                    <a href="index.html">Generic</a> |
					<a href="index.html">Elements</a> |
					<a href="index.html">Sign Up</a>
            </div>
           
        
        </section>
        
        <section id="wrapper">
            <br><br>
            <img src="images/blacksquare.png" width="525" height="197"></img>
            
            <br><br><br>


            <div class="container">
               
    
                
               
                <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>
                                <li><a href="#">5</a></li>
                                <li><a href="#">6</a></li>
                                <li><a href="#">7</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>                                                               

                

                <div class="lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
                    <form action="">
                        <input type="text" id="todo" placeholder="Enter a To-do and hit enter"...

CSS

/*adder*/

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

 
 * {
    padding:0;
    margin:0;
}


html {
 background:teal;
}


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


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



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

#wrapper {
    text-align: center;
    width:1000px;
    height:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:teal;                       /*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; 
}










/* 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 `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
   * zoom: 1;
}


ul.navbar {
 
  background:white; 
  border-style:solid;
  border-color:#ccc;
  border-width:1px; 
  width: 132px;
  border-radius: 4px;
  margin-left:10px;
  margin-right:5px;
  font-size:14px;
  height:33px;


}



.ActiveListItem:after {
    content: "\25BC\00a0\00a0";                        /*carat and spaces*/ 
    float:right;
   ...

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();	

	$('form').submit(function () {
	    if (input.val() !== '') {
	        var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();
            
            
            if (activeNumber == "Music") {
                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;
	});

	ul.on('click', 'a', function (e) {
	    e.preventDefault();
	    $(this).parent().slideUp();

	    if (ul.children().length == 0) {
	    	ul.removeClass('active')
	    		.addClass('inactive');
	    	input.focus();	
	    }
	});

});