JSFiddle - React, Tailwind, and code Playground

HTML

<div id="roleta"></div>
<p>Resultado:</p>
<button type="button" id="rodar">Rodar</button>

CSS

#roleta{
    position:relative;
    width:200px;
    height:200px;
    margin: 50px auto;
}

#roleta img{
    position:absolute;
    display:none;
    top:0;
    left:0;
}

JavaScript

jQuery(document).ready(function($){
    var imagens = [
        {id: 'minhaimagem-vermelha', src: 'https://placeholdit.imgix.net/~text?txtsize=48&bg=ff0000&txtclr=FFFFFF&txt=Vermelho&w=200&h=200&txttrack=0', name: 'Vermelha'},
        {id: 'minhaimagem-fuba', src: 'https://placeholdit.imgix.net/~text?txtsize=48&bg=668800&txtclr=FFFFFF&txt=Fuba&w=200&h=200&txttrack=0', name: 'Fubá'},
        {id: 'minhaimagem-verde', src: 'https://placeholdit.imgix.net/~text?txtsize=48&bg=00ff00&txtclr=FFFFFF&txt=Verde&w=200&h=200&txttrack=0', name: 'Verde'},
        {id: 'minhaimagem-azul', src: 'https://placeholdit.imgix.net/~text?txtsize=48&bg=0000ff&txtclr=FFFFFF&txt=Azul&w=200&h=200&txttrack=0', name: 'Azul'}
    ];
    
    $roleta = $('#roleta');
    
    for(i in imagens){
       $roleta.append(
           $('<img />').attr('id', imagens[i].id)
                       .attr('src', imagens[i].src)
                       .attr('title', imagens[i].name)
       );
    }
    
    $(document).on('click', '#rodar', function(event){
        event.preventDefault();
        var time = 1000;
        var i = Math.floor(Math.random() * 3) + 0;
        $imgs = $roleta.find('img');
        $imgs.fadeOut(time).first().fadeIn(time);
        $imgs.each(function(index, el){
            if (i == index){
                $('p').text('Resultado: '+$(this).attr('title'));
                return false;
            }
            
            setTimeout(function(){
                if (!$(el).is(':last')){
                    $(el).fadeOut(time)
                    .next()
                    .delay(time)
                    .fadeIn(time);
                }
            }, time*index);
        });
    });
});