JSFiddle - React, Tailwind, and code Playground

HTML

<div id='main'>
    <div id='divList'>
    <ul class='item-list ui-sortable' id='pageList'>
        <li class='page selected'>
            <a href='#'>
                <div class='b4-icon page'></div>
                Home
                <div class='r'>
                    <div class='b4-icon grabber'></div>
                </div>
            </a>
        </li>
		<li class='page'>
            <a href='#'>
                <div class='b4-icon page'></div>
                Page 2
                <div class='r'>
                    <div class='b4-icon grabber'></div>
                </div>
            </a>
        </li>
	</ul>
</div>
    <div id='foot'>
        <button id='add_page'>Add Item</button>
    </div>
</div>

<!-- ****DIALOG BOX***** -->
<div id="new_page" title="Add Page" style='display:none;'>
  <form>
  <fieldset>
    <label for="name">Page Title: </label>
    <input type="text" name="name" id="pageTitle" class="text ui-widget-content ui-corner-all" />
  </fieldset>
  </form>
</div>

CSS

.item-list li{
padding:0px 15px;
line-height:32px;
}

.item-list li.selected{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:10px;}

.item-list li.selected .b4-icon.page{background-position:0px -13px;}
.item-list li .b4-icon.page{margin-bottom:-2px;margin-right:10px;}
.b4-icon.page{background-image:url(https://codiqa.com/static/images/v4/builder_pages_icon_sprite.png);
width:11px;height:13px;}

.b4-icon.grabber{background-image:url(https://codiqa.com/static/images/v4/builder_pages_drag_page_icon_sprite.png);
width:12px;height:8px;}

.item-list li{padding-left:10px;
border:1px solid #fbfbf9;
border-width:1px 0px 1px 0px;
padding:0px 15px 0px 15px;
line-height:32px;
color:#666;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:12px;
text-shadow:0 1px 0 #fff;
}
.item-list li.selected > a {font-weight:bold;color:#fff;text-shadow:0px -1px 0px #285d89;}
body, div, ld, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, filedset, code, pre, legend, input, textarea, p, blockquote, th, td {margin:0;padding:0;}

.item-list li.selected .b4-icon.grabber{background-position:0px -8px;}

.b4-icon {display:inline-block;background-repeat:no-repeat;background-color:transparent;}
li {list-style:none;}

.item-list li.selected .r{display:block;}
.item-list li.r {dispaly:none;}
.r {float:right;}


.page{height:100%;}

.item-list li a{text-decoration:none;}

.item-list li.selected{
color:#fff;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:12px;font-weight:bold;text-shadow:0 1px 0 #005e8c;
border:1px solid #19678d;
border-width:1px 0px 1px 0px;
background-color:#69a5d3;
-webkit-box-shadow:inset 0 1px 0 #b5d7ef;
-moz-box-shadow:inset 0 1px 0 #b5d7ef;
box-shadow:inset 0 1px 0 #b5d7ef;
-o-box-shadow:inset 0 1px 0...

JavaScript

$(document).ready(function() {
    
    $(function() {
		$( ".item-list" ).sortable();
	});

	$('.item-list').on("click","li",function() {
		$('.page').removeClass('selected');
		$(this).addClass('selected');
	});
    
    $("#add_page").click(function() {
        $( "#new_page" ).dialog( "open" ).trigger('create');
    });
  
  $( "#new_page" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Add Page": function() {
            $( ".item-list" ).append("<li class='page'><a href='#'><div class='b4-icon page'></div>" + $('#pageTitle').val() + "<div class='r'><div class='b4-icon grabber'></div></div></a></li>");
            $( this ).dialog( "close" );
			$('#pageList ul').trigger('create').listview('refresh');
          },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
	},
      close: function() {
        //allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });
    
});