JSFiddle - React, Tailwind, and code Playground

by justi

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/ui-lightness/jquery-ui.css">
<div class="page">      
    <div id="products">     
        <h1 class="ui-widget-header">Categories</h1>         
        <div id="catalog">           
           <h3><a href="#">Teaching</a></h3> 
               <div>  
                   <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.
                   </p>             
                <ul>                 
                    <li>SQL databases
                        <span class="ui-icon ui-icon-cart"></span>
                    </li>
                    <li>Programming in Python
                        <span class="ui-icon ui-icon-cart"></span>
                    </li>
                    <li>Advanced OOP
                        <span class="ui-icon ui-icon-cart"></span>
                    </li>                         
                </ul>         
            </div>         
            <h3><a href="#">Research projects</a></h3>         
            <div>             
                <ul>                                  
                    <li>Agile
                        <span class="ui-icon ui-icon-cart"></span>
                    </li>              
                </ul>         
            </div>         
            <h3><a href="#">Presenting</a></h3>         
            <div>             
                <ul>                 
                    <li>Presentinng 1
                        <span class="ui-icon ui-icon-cart"></span>
                    </li>                        
                </ul>         
            </div>
            <h3><a href="#">Scientific writing</a></h3>  
            <div>       
                <div>             
    ...

CSS

.page
{width:900px;}
h1 { padding: .2em; margin: 0; }     
#products { float:left; width: 350px; margin-right: 2em; }     
#cart, #content { width: 350px; float: left; }     
/* style the list to maximize the droppable hitarea */     
#cart ol { margin: 0; padding: 1em 0 1em 1em; }
#products p {margin-bottom:10px;}
#products li {text-indent:10px; padding:3px; color:#777777;}
#products li span, #cart ol span, #cart ol input
{
    display: inline-block;
}
#cart ol input, #cart ol span
{
    float: right;
}
#cart ol input
{
    width:2em;
}
#products li span:hover, span.ui-icon-trash, span.ui-icon-circle-plus, span.ui-icon-circle-minus
{
    cursor:pointer;
}

.demo-description
{
    float:left;
}
#cart ol li
{
    padding:10px; color:#224466; border: 1px solid #99aacc;
    list-style-type: decimal;
    margin:10px;
    cursor: move;
}
#cart ol li span
{
   margin-top:3px;
}
#cart ol li.placeholder
{
    padding:2px; color:#224466; border: none;
    list-style-type: none;
    margin:10px;
}
#content{
    height:400px;
}

JavaScript

$(function() {         
    $( "#catalog" ).accordion({
            event: "mouseover"
        }); 
           
    $( "#cart ol" ).droppable({             
        activeClass: "ui-state-default",             
        hoverClass: "ui-state-hover",             
        accept: ":not(.ui-sortable-helper)",             
        drop: function( event, ui ) {                 
            $( this ).find( ".placeholder" ).remove();                 
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );             }         
    }).sortable({             
        items: "li:not(.placeholder)",             
        sort: function() {                 
            // gets added unintentionally by droppable interacting with sortable                 
            // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options                 
            $( this ).removeClass( "ui-state-default" );             
        }         
    });     
});

$('#catalog h3 a').click(function() {
    $("#content h2").text($(this).text());
    $("#content div").text("Some text about " + $(this).text());
   
});
$('#catalog li span').click(function() {
    
    $newItem = $("#cart ol").append("<li>" + $(this).parent().text()
                  
               +"<span class=\"ui-icon ui-icon-trash\"></span>"
               +"<span class=\"ui-icon ui-icon-circle-plus\"></span>"
               +"<input type=\"text\" id=\"peopleCount\" value=\"1\" />"                   +"<span class=\"ui-icon ui-icon-circle-minus\"></span>"
               +"</li>");
 
    $( "#cart ol" ).find( ".placeholder" ).remove();
    $newItem.find( "span.ui-icon-trash:last" ).click(function() {
        $(this).parent().remove();
    }); 
    $newItem.find( "span.ui-icon-circle-plus:last" ).click(function() {
        $people = $(this).parent().find("#peopleCount");
        $people.val(parseInt($people.val()) + 1);
    });
    $newItem.find(...