JSFiddle - React, Tailwind, and code Playground

by Kyle

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div id="rate-yo-candy">
    <p>Put your favourite candy bar at the top, the rest is easy!</p>
    <ul id="sortable">
        <li class="snickers gold"><div>&nbsp;</div></li>
        <li class="twix silver"><div>&nbsp;</div></li>
        <li class="butterfinger bronze"><div>&nbsp;</div></li>
    </ul>
    <p>
    <button type="submit" title="Submit your choice!">These are yummy!</button>
    </p>
</div>

CSS

div#rate-yo-candy
{
  background-color: #333;
  border-radius: 3px;
  color: #eee;
  width: 700px;
  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
{
  padding: 0;
  width: 100%;
}

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

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; 
}

.snickers div
{
  background-image: url(http://sevensense.co.uk/image/snickers_grey.png);
  background-position: 60% 50%;
  height: 100%;
}

.twix div
{
  background-image: url(http://sevensense.co.uk/image/twix_grey.png);
  background-position: 40% 50%;
  height: 100%;
}

.butterfinger div
{
  background-image: url(http://sevensense.co.uk/image/butterfinger_grey.png);
  background-position: 50% 56%;
  height: 100%;
}

.gold
{
  background-color: #fceabb;
  background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
  background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
}

.silver
{
  background-color: #f2f6f8;
  background: -webkit-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
  background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7...

JavaScript

$(document).ready(function() {
    var s = $("#sortable");
    s.sortable({
        tolerance: 'pointer',
        stop: function(event, ui) {
            var ranks = ['gold','silver','bronze'];
            $("li",s).each(function (idx) {
                for(var i = 0; i < ranks.length; ++i) $(this).removeClass(ranks[i]);
                $(this).addClass(ranks[idx]);
            });
        }
    });
});