JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    
    <script>
    
    const XMLNS = "http://www.w3.org/2000/svg";
const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ";
const VOWELS = "AEIOUYÅÄÖ";

function randInt(a, b) {return a + Math.floor(Math.random()*(b-a+1));}




	var Sector = function(type, value, color) {
    this.type = type;
    this.value = value;
    this.color = color;
};



var Wheel = function(sectors) {
    this.sectors = sectors;
    
    this.svg = null;
    this.x = 0;
    this.y = 0;
    this.scaleX = 1;
    this.scaleY = 1;
    this.rotation = 0;
    

    function makePiePart(from, to, color) {
        var ret = document.createElementNS(XMLNS, "path");
        var d = ["M", from.x, from.y,
                 "A", 1, 1, 0, 0, 0, to.x, to.y,
                 "L", 0, 0];
        //debugger;
        ret.setAttribute("d", d.join(" "));
        ret.setAttribute("stroke", "black");
        ret.setAttribute("stroke-width", 0.01);
        ret.setAttribute("fill", color);
       return ret;
    }
    
    
    function makeLabel(text, from, to, angle, color) {
        var ret = document.createElementNS(XMLNS, "text");
        //middle way of center sector (- the center of the wheel)
        var midScl = 0.4800; //or little bit towards outer ring
        var cx = (from.x + to.x)*midScl;
        var cy = (from.y + to.y)*midScl;
        ret.setAttribute("fill", color);
        ret.setAttribute("text-anchor", "end");
        ret.setAttribute("letter-spacing","0.02px");
        ret.setAttribute("alignment-baseline", "auto");
        ret.setAttribute("x", cx);

        ret.setAttribute("y", cy);
        ret.setAttribute("font-size", "0.1px");
        ret.setAttribute("font", "Courier New");
        ret.setAttribute("transform", "rotate("+angle+", "+cx+", "+cy+")");
        
        ret.setAttribute("font-variant-numeric","ordinal");

        ret.innerHTML = text;
        return ret;
    }

  ...

CSS

.puzzle {
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 1%;
    margin-top: 2%;
    font: 2.8em Monospace;
    line-height: 1.5;
}



.buttons button {
    margin: 5px;
    min-width: 100px;
    min-height: 25px;
    font: 1.7em Helvetica;
    
    
}

.buttons input {
    margin: 1%;
    min-width: 35%;
    min-height: 5%;
}

.chooseArea {
    position: absolute;
    left: 5%;
    top: 20%;
    width: 90%;
    height: 60%;
    background: rgba(50, 50, 50, 0.95);
    
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;
    padding-top: 5%;
    
    animation: chooserAppear 300ms;
}

.chooseArea button {
    margin: 1%;
    min-width: 5%;
    min-height: 15%;
    font: 2em Helvetica;
}


.infoBox {
    position: absolute;
    right: 1%;
    top: 28%;
    background: rgba(90, 0, 200, 0.26);
    padding: 1.3%;
    min-width: 20%;
    font: 1.6em Helvetica;
}

.infoBox span {
    
    font: 1.6em Helvetica;
}




.hiddenLetter {
    color: rgba(170,170,170,0); /*just to be sure make transparent and same color*/
    background: #aaa;
    border: 3px solid black;
    margin: 0.2%;
}

.revealingLetter {
    color: rgba(221,221,221,0);
    background: #ddd;
    border: 3px solid black;
    margin: 0.2%;
    -webkit-animation-name: revealing; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: revealing;
    animation-duration: 1.2s;
}

.revealedLetter {
    color: black;
    background: white;
    border: 3px solid white;
    margin: 0.2%;
}



/* Animations */

/* Safari 4.0 - 8.0 */
@-webkit-keyframes revealing {
    from {background-color: #ddd;}
    to {background-color: magenta;}
}

/* Standard syntax */
@keyframes revealing {
    from {background-color: #ddd;}
    to {background-color: magenta;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes chooserAppear {
    from {transform: scale(1, 0);}
    to {transform: scale(1,...