JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>Campus Food</title>
    <script type="text/javascript">
        var venue_json = {
          "venues": [
            {
            "name": "Venue 1",
            "description": "",
            "last_visit": "",
            "num_vists": 0,
            "rating": 6,
            "comments": []
            },
            {
            "name": "Venue 2",
            "description": "",
            "last_visit": "",
            "num_vists": 0,
            "rating": 5,
            "comments": []
            },
            {
            "name": "Venue 3",
            "description": "",
            "last_visit": "",
            "num_vists": 0,
            "rating": 8,
            "comments": []
            },
            {
            "name": "Venue 4",
            "description": "",
            "last_visit": "",
            "num_vists": 0,
            "rating": 4,
            "comments": []
            },
            {
            "name": "Venue 5",
            "description": "",
            "last_visit": "",
            "num_vists": 0,
            "rating": 6,
            "comments": []
            }
          ]
    };
</script>
</head>
<body>
    <div class="page-wrapper">
        <div style="380px; margin:0 auto;text-align:center;">
            <h2>Where should I go?</h2>
        </div>
        <div id="spinner">
            <div id="spinner-inner">
                <ul>
                    <li>Venue 1</li>
                    <li>Venue 2</li>
                    <li>Venue 3</li>
                    <li>Venue 4</li>
                    <li>Venue 5</li>
                </ul>
            </div>
        </div>
        <div class="buttons">
            <a id="btnSpin" href="#spin">Spin</a>
        </div>
    </div>
</body>
</html>

CSS

.page-wrapper{
    max-width:960px;
    margin:0 auto;
}

#spinner{
    width:360px;
    margin:10px auto;
    background-color:#333;
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#666666), color-stop(.6,#333));
    border-radius:8px;
    padding:20px;
}

#spinner-inner ul{
    padding:6px;
    margin:0;
    list-style-type:none;
}

#spinner-inner ul li{
    list-style-type:none;
    padding:4px;
    border-color:#e8e8e8;
    border-radius:6px;
}

#spinner-inner ul li.selected{
    background-color:#fefefe;
    background-image:-webkit-gradient(linear,
                    left bottom,
                    left top,
                    color-stop(0.48, rgb(254,254,254)),
                    color-stop(0.74, rgb(232,232,232)),
                    color-stop(1, rgb(254,254,254)));
}

#spinner-inner ul li:not(.selected){
    display:none;
}

.buttons{
    margin:20px auto;
    text-align:center;
    width:360px;
}

.buttons a, 
.buttons a:active, 
.buttons a:visited, 
.buttons a:link {
    text-decoration:none;
    color:#333;
    font-weight:bold;
    font-size:14px;
    background-color:#dadada;
    display:inline-block;
    width:120px;
    border-radius:6px;
    box-shadow: 1px 1px #eee;
    text-shadow:0 1px 1px #F6F6F6;
    padding:10px 5px;
    margin:0 4px;
}

.buttons a:hover{
    background-color:#e8e8e8;
}

@-webkit-keyframes spin{  
  0% {  
        background-position: 0, 0 0;
        -webkit-transform: rotateX(0deg) translateZ(25px);
     }
  100% { 
        background-position: 0, 0 -640px;
        -webkit-transform: rotateX(360deg) translateZ(25px);
    
     }
}

.rotating{
    -webkit-animation: spin .4s infinite linear;
    -webkit-transition: background-position .7s;
}

JavaScript

var foodly = {
    init: function(venues){

        this.setVenues(venues);

        $('#spinner-inner ul li:eq(0)').addClass('selected');

        $('#btnSpin').click(function(e){
            e.preventDefault();
            foodly.beginSpin();
        });
    },

    venues: [],

    setVenues: function(v){
        this.venues = v;
    },
     
    selectVenue: function(e){
        var idx = 0;

        $('#spinner-inner ul li').each(function(i){
            if( $(this).hasClass('selected') ){
                idx = i;
            }
        });
        
    },

    beginSpin:function(){
                
        $('#spinner-inner ul li.selected').addClass('rotating');
        
        var timeout = setTimeout(function(){
            clearTimeout(timeout);

            foodly.endSpin();

        }, 2000);
    },

    endSpin: function(){
        var selected = this.randomize();
        var index = selected - 1;
        
        $('#spinner-inner ul li.selected').removeClass('rotating');
        $('#spinner-inner ul li').removeClass('selected');
        $('#spinner-inner ul li:eq(' + index + ')').addClass('selected');
    },

    randomize: function(){
        var count = this.venues.length;
        var randomVal = (Math.random() * count);

        return Math.ceil(randomVal);
    }
};

$(function(){
    foodly.init(venue_json.venues);
});