JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
            <div id="left-column">
                <form class="iform" action="#" method="get">
                    <label for="joiner"></label>
                    <input id="joiner" name="joiner" class="joiner" placeholder="Please Enter your name" />
                    <button class="add">Add</button>
                    <button class="spin-trigger">Spin</button>
                </form>        
                <canvas class="canvas" width="500" height="500"></canvas> 
            </div>
            <div id="right-column">
                <p class="winner">The Winner is ... <span>&nbsp;</span></p>
                <ul class="participants">
                </ul>
            </div>
            <div style="clear:both"></div>
            
            
        </div>

CSS

#main {
    width:1000px;
}

#left-column {
    float:left;
    width:600px;
    padding-right:15px;
}

#right-column {
    float:right;
    width:300px;
}

.participants {
    list-style:none;
}

.participants li {
    border-radius:15px;
    padding:15px;
    font-family: 'Carter One', arial, serif;
    font-size:150%;
    text-shadow: 2px 2px 2px #000;
}

.participants li:nth-child(2n+1) {
    background-color:#bada55;
}

.winner {
    font-family: 'Carter One', arial, serif;
    font-size:250%;
    text-shadow: 2px 2px 2px #000;    
    display:none;
}

.winner:before {
    content: "The Winner is ... "
}

JavaScript

/*  
 *  This jquery plugin is based on this blogpost - http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas
 *  If you want to know more how it works, please refer to the above tutorial. 
 *  
 *  @author Roy Yu | iroy2000 [at] gmail.com ( modify, repackage and add new features )
 *  @description: This jquery plugin will create a spin wheel and let you to add players at run time. 
 *  
 */


(function($){
    $.fn.spinwheel = function(options, callback){
        
        var params = $.extend({},$.fn.spinwheel.default_options, options), $that = $(this), ctx = null, colorCache = [],
        startAngle = 0, arc = Math.PI / 6, spinTimeout = null, spinArcStart = 10, spinTime = 0, spinTimeTotal = 0, spinAngleStart = 0, pplArray = params.pplArray, pplLength = pplArray.length;

        if($.isFunction(options)){
            callback = options;
            options = {};
        } 
        
        var methods = {
            init: function() {
                methods.getContext();
                methods.setup();
                drawWheel();                
            },       
            setup: function() {
                $(params.spinTrigger).bind('click', function(e){
                    e.preventDefault();
                    methods.spin();
                });
                                              
                $(params.addPplTrigger).bind('click', function(e){
                    e.preventDefault();
                    var item = $('<li />').append($(params.joiner).val());
                    $(params.paricipants).append(item);
                    methods.updatePanel();
                });
                
                
            },            
            getContext: function() {         
                if(ctx !== null)
                    return ctx;

                var canvas = $that[0];
                ctx = canvas.getContext("2d");          
            },
            spin: function() {
               ...