JSFiddle - React, Tailwind, and code Playground

by Csaba Hellinger

HTML

<script src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/jquery.easing.1.3.js"></script>
<script src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/jquery.jSlots.min.js"></script>
<div class="fancy">
    <ul class="slot">
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/Knife.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/SSG 08.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/P2000.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/UMP-45.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/PP-Bizon.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/P250.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/P90.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/Nova.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/Negev.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/Mp7.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/PP-Bizon.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/P250.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/P90.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/M4A1-S.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/Gock-18.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/Five-SeveN.png"/></li>
        <li><img src="https://dl.dropboxusercontent.com/u/104187515/CASE%20OEPN/Desert Eagle.png"/></li>
        <li><img...

CSS

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.jSlots-wrapper {
    overflow: hidden;
    height: 20px;
    display: inline-block; /* to size correctly, can use float too, or width*/
    border: 1px solid #999;
}

.slot {
    float: left;
}

body {
background-image: url("b.png");
background-repeat: repeat-y;
background-size: 100%;
background-color: #C0C0C0;
}



/* ---------------------------------------------------------------------
   FANCY EXAMPLE
--------------------------------------------------------------------- */
.fancy .jSlots-wrapper {
    overflow: hidden;
    height: 144px;
    display:  /* to size correctly, can use float too, or width*/
    border: 1px solid #999
}

.fancy .slot li {
    width: 150px;
    line-height: 5px;
    text-align: center;
    font-size: 70px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
    font-family: 'Gravitas One', serif;
    border-left: 1px solid #999;
    text-align: center;
    color: #fff;
    font-family: 'Gravitas One', serif;
}


.fancy .slot li span {
    display: block;
}

.fancy .slot li img {
    width: 145px;
    height: 145px;
}

/* ---------------------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------------------- */


@-moz-keyframes winner {
        0%, 50%, 100% {
            -moz-transform: rotate(0deg);
            font-size:70px;
            color: #fff;
        }
        25% {
            -moz-transform: rotate(20deg);
            font-size:90px;
            color: #FF16D8;
        }
        75% {
            -moz-transform: rotate(-20deg);
            font-size:90px;
            color: #FF16D8;
        }
}
@-ms-keyframes winner {
        0%, 50%, 100% {
            -ms-transform: rotate(0deg);
            font-size:70px;
            color: #fff;
        }
        25% {
            -ms-transform: rotate(20deg);
            font-size:90px;
            color: #FF16D8;
       ...

JavaScript

var Money = 0
        // fancy example
        $('.fancy .slot').jSlots({
            number : 1,
            winnerNumber : 1,
            spinner : '#playFancy',
            easing : 'easeOutSine',
            time : 7000,
            loops : 3,
            onStart : function() {
                $('.slot').removeClass('winner');
                //audio.play();
                Money = Money + 2.50
                document.getElementById('Money').innerHTML = Money;
            },
            onWin : function(winCount, winners) {
                // only fires if you win
                
                $.each(winners, function() {
                    this.addClass('winner');
                });

                // react to the # of winning slots                 
                if ( winCount === 1 ) {
                    alert('You got ' + winCount + ' Knife!!!');
                } else if ( winCount > 1 ) {
                    alert('You got ' + winCount + ' Knives’s!!!');
                }
                
            }
        });