JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <h1>Geschenkeverlosung</h1>
        <!-- Dashier ist die Liste der Teilnehmer von der Verlosung -->
        <div style="width:200px; float:left;">
        <ul class="member">
            <li>Adamec Simone</li>
            <li>Aktas Murat</li>
            <li>Alfare Simone</li>
            <li>Alge Andreas</li>
            <li>Auer Christoph</li>
            <li>Aydin Azim</li>
            <li>Berchtold Jörg</li>
            <li>Berchtold Wolfgang</li>
            <li>Berger Albert</li>
        </ul></div><div style="float:right;">
        <!-- Button zum starten der Verlosung -->
        <a href="#" id="auslosungstarten">Auslosung starten...</a>
        <!-- Ausgabe des Gewinners: -->
        <h1 id="andthewinneris"></h1></div><br clear="all" />
    </body>

CSS

/* Das ist der CSS Code zum Verlosungs-System und bedarf meiner Meinung nach keiner weiteren Erklärung */
        *{outline:none;padding:0px;margin:0px;}
        body{padding:40px;font:14px "Myriad Pro";color:#333;}

        h1{margin-bottom:20px;font-size:26px;font-weight:normal;}

        .member{list-style:none;width: 100%;}
        .member li{padding:10px;width:160px;background:#efefef;border:1px solid #ddd;margin:0 10px 10px 0;float:left;text-align:center;}
        .member li.win{background:#fff9d7;border:1px solid #e2c822;}

        #auslosungstarten{padding:10px;width:160px;background:#f24f04;border:1px solid #c13d00;margin:0 10px 10px 0;float:left;text-align:center;font-weight:bold;text-decoration:none;display:block;color:#fff;margin-top:40px;}
        #andthewinneris{margin-top:40px;font-size:26px;font-weight:normal;color: #f24f04;float: left;}

JavaScript

/* Wenn der Body geladen ist werden die enthaltenen Funktionen ausgeführt.
        $(document).ready(function(){ ... }); Alle in dieser enthaltenen Funktionen werden entsprechd erst bei geladenem Body ausgeführt */
        $(document).ready(function(){
            /* Der Button mit der id #auslosungstarten wird mit einer click Funktion belegt. */
            $('#auslosungstarten').click(function(){
                /* Der Button selbst wird ausgeblendet */
                $(this).hide('slow');

                /* Ein Interval wird gestartet und die Funktion auslosung() alle 300 Milisekunden ausgeführt */
                intVal = window.setInterval("auslosung()", 300);
                /* Nach 5 Sekunden wird der Gewinner gezogen */
                window.setTimeout("winneris()", 5000);
                /* return false verhindert, dass der href des Links aufgerufen wird */
                
                // zeigt den auslosen button wieder an.
                	window.setTimeout(function(){
                        $('#auslosungstarten').show();
                    }, 7000);
                
                return false;
            });

            auslosung = function(){
                /* member enthält die Anzahl der Teilnehmer der Verlosung */
                member = $('.member li').length;
                /* 
                Math.random() generiert eine Zufallszahl.
                Diese mit den Teilnehmern multipliziert ergebit den index Wert eines der Teilnehmer.
                 */
                randNum = Math.floor(Math.random()*member);
                /* Die CSS Klasse "win" wird von allen li's entfernt und ... */
                $('.member li').removeClass('win');
                /* ... für den durch die Zufallszahl gewählten Teilnehmer neu gesetzt */
                $('.member li:eq('+randNum+')').addClass('win');


                /* Diese Funktion wiederholt sich alle 300 Milisekunden.
                Dadurch entsteht das Muster, dass immer ein...