JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div id="rate-yo-candy">
    <ul class="sortable">
        <li class="snickers gold"><div>&nbsp;</div></li>
        <li class="snickers bronze"><div>&nbsp;</div>
            <ul class="sortable">
                <li class="twix silver"><div>&nbsp;</div></li>
                <li class="twix bronze"><div>&nbsp;</div></li>
            </ul>
        </li>
        <li class="butterfinger bronze"><div>&nbsp;</div></li>
        <li class="butterfinger silver"><div>&nbsp;</div></li>
    </ul>

</div>

CSS

div#rate-yo-candy
{
  background-color: #333;
  border-radius: 3px;
  color: #eee;
  width: 200px;
  padding: 10px;
}

div#rate-yo-candy p
{
  width: 75%;
  margin: 0 auto;
  font-family: Palatino;
  font-style: italic;
  font-size: 22px;
  text-align: center;
}

ul.sortable
{
  width: 100%;
}

ul.sortable li
{
  list-style-type: none;
  margin: 5px;
  font-size: 26px;
  height: auto;
  cursor: move;
  text-align: center;
  line-height: 52px;
  border-radius: 3px;
}

ul.sortable li div
{
    height:75px;
}

div#rate-yo-candy button
{
    color: #333;
    border: 1px solid #666;
    border-radius: 3px;
    width: 400px;
    text-align: center;
    font-size: 26px;
    font-family: Palatino;
    background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%,#fcfff4), 
            color-stop(40%,#dfe5d7), 
                color-stop(100%,#b3bead
        ));
    position: relative;
    top: 0;
    -webkit-transition:top 0.2s ease-in;  
   -moz-transition:top 0.5s ease-in;  
}

div#rate-yo-candy button:hover
{
    cursor: pointer;
    position: relative;
    top: 7px;
    -webkit-transition:top 0.2s ease-in;  
   -moz-transition:top 0.5s ease-in; 
}
ul.sortable li ul.sortable li {padding-left:50px}

JavaScript

$(document).ready(function() {

    $(".sortable").sortable({
        connectWith: ".sortable"
    });
});