JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
<ul class="sortable list-unstyled" id="sortable">
    <li>
        <div class="block block-title">Index</div>
        <ul class="sortable list-unstyled"></ul>
    </li>
    <li>
        <div class="block block-title">About Us</div>
        <ul class="sortable list-unstyled"></ul>
    </li>
    <li>
        <div class="block block-title">Portfoion</div>
        <ul class="sortable list-unstyled"></ul>
    </li>
    <li>
        <div class="block block-title">Services</div>
        <ul class="sortable list-unstyled">
            <li>
                <div class="block block-title">Design</div>
                <ul class="sortable list-unstyled"></ul>
            </li>
            <li>
                <div class="block block-title">Develope</div>
                <ul class="sortable list-unstyled"></ul>
            </li>
            <li>
                <div class="block block-title">SEO</div>
                <ul class="sortable list-unstyled"></ul>
            </li>
            <li>
                <div class="block block-title">Support</div>
                <ul class="sortable list-unstyled"></ul>
            </li>
        </ul><!-- /.menu-sortable -->
    </li>
    <li>
        <div class="block block-title">Contact</div>
        <ul class="sortable list-unstyled"></ul>
    </li>
</ul><!-- /.menu-sortable -->

CSS

.block {
	margin: 5px 0;
	border: 1px solid #f1e8e2;
	background: #fff;
}
.block-title {
    font-family: Arial;
	font-size: 12px;
	color: #4c4743;
	padding: 0 10px;
	height: 33px;
	line-height: 33px;
	position: relative;
}
.sortable {
    list-style: none;
    padding-left: 0;
}
.sortable ul {
    margin-left: 25px;
}
.ui-sortable-helper {
	box-shadow: rgba(0,0,0,0.15) 0 3px 5px 0;
	width: 300px!important;
	height: 33px!important;
}
.sortable-placeholder {
	height: 35px;
	background: #e3dcd7;
	margin-bottom: 5px;
	margin-top: 5px;
}

JavaScript

$('.sortable').sortable({ 
    connectWith:    '.sortable',
    cursor:         'move',
    placeholder:    'sortable-placeholder',
    handle:         '.block-title',
    cursorAt:       { left: 150, top: 17 },
    tolerance:      'pointer',
    scroll:         false,
    zIndex:         9999,
});
$('.sortable').disableSelection();