JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div class="wrap">
            <div class="ch-dif">
                <div class="ch-legend">Select difficulty</div>
                <div class="ch-o o-easy" onclick="hanoiInit(3)">easy</div>
                <div class="ch-o o-medium"  onclick="hanoiInit(5)">medium</div>
                <div class="ch-o o-hard" onclick="hanoiInit(7)">hard</div>
            </div>
            <div class="hh-cont">
                <div class="hh-l l-first">
                </div>
                <div class="hh-l l-second">
                </div>
                <div class="hh-l l-third">
                </div>
            </div>
            <div class="win">
                You win!
            </div>
        </div>
    </body>

CSS

html{
    font-family: Tahoma;
    color: rgb(131, 131, 131);
}
div{
    -webkit-transition: opacity 0.1s linear, box-shadow 0.2s linear, background-color 0.1s linear, top 0.5s linear;
    -moz-transition: opacity 0.1s linear, box-shadow 0.2s linear, background-color 0.1s linear, top 0.5s linear;
    -o-transition: opacity 0.1s linear, box-shadow 0.2s linear, background-color 0.1s linear, top 0.5s linear;
    transition: opacity 0.1s linear, box-shadow 0.2s linear, background-color 0.1s linear, top 0.5s linear;
}
.wrap {
    position: fixed;
    width: 800px;
    height: 400px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #ccc;
    overflow: hidden;
}
.ch-dif {
    height: 96%;
    width: 98%;
    padding: 1%;
    position: absolute;
    background-color: white;
    z-index: 5;
}
.ch-dif .ch-legend {
    font-size: 60px;
    font-family: Tahoma;
    text-align: center;
    margin-top: 34px;
}
.ch-dif .ch-o {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: #888;
    float: left;
    margin-top: 65px;
    margin-left: 120px;
    opacity: 0.7;
    color: white;
    text-align: center;
    line-height: 100px;
    font-size: 21px;
    cursor: pointer;
}
.ch-dif .ch-o.o-easy {
    background-color: rgb(72, 150, 35);
}
.ch-dif .ch-o:hover {
    opacity: 1;
}
.ch-dif .ch-o.o-medium {
    background-color: rgb(24, 129, 199);
}
.ch-dif .ch-o.o-hard {
    background-color: rgb(247, 100, 31);
}
.hh-cont {
    padding: 1%;
    height: 96%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.hh-cont.alert{
    box-shadow:inset 0px 0px 10px rgba(255, 0, 0, 0.49);
}
.hh-cont .hh-l {
    width: 33%;
    height: 100%;
    float: left;
    position: relative;
}
.hh-cont .hh-disc {
    margin: 0px auto 4px;
    height: 30px;
    opacity: 0.7;
    border: 1px solid #C4C4C4;
   ...

JavaScript

function hanoiInit(difficulty){"use strict";
    var addClass = function (o,c){o.className = (o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "");}
    var removeClass = function (o,c){o.className = o.className.replace(new RegExp("(^|\\s)" + c + "(\\s|$)", "g"), "$1").replace(/\s+/g, " ").replace(/(^ | $)/g, "");}
    var hasClass = function (o,c) {return  (new RegExp("(^|\\s)" + c + "(\\s|$)", "g")).test(o.className);}
    var redAlert = function (){document.querySelector(".hh-cont").className += " alert";setTimeout(function(){removeClass(document.querySelector(".hh-cont"), "alert");},200);}
    var colors = ["#82E9FF", "#BB8BFF","#FF695C","#FFF560","#80E845","#00FFB7","#E84018"], discs = {}, winornot={"1":false, "2":false,"3":true};
    (function generateCols(){document.querySelector(".ch-dif").style.top = -400+"px"; var i, firstCol = document.querySelectorAll(".l-third")[0];
        for(i=0; i<difficulty; i++){discs[i]=new Disk(256-(256/difficulty)*i);discs[i].insert(firstCol, i);}}());
    function addEvent(elem, evType, fn) {if (elem.addEventListener) elem.addEventListener(evType, fn, false);
        else if (elem.attachEvent) elem.attachEvent('on' + evType, fn); else elem['on' + evType] = fn;}
    function Disk(r){var that = this; this.r=r, this.node = createDisc(r);
        function createDisc(l){var nElem = document.createElement('div');
            nElem.innerHTML ='', nElem.style.width = r+"px", nElem.style.backgroundColor = colors.pop(), nElem.className = "hh-disc", nElem.returnWidth = parseInt(r);
            return nElem;}
        this.insert = function(where, i){if(i || i===0) that.node.elemId=i;
            if(where.children.length===0) where.appendChild(that.node);
            else if(where.children[where.children.length-1].returnWidth>that.node.returnWidth) where.appendChild(that.node);
            else document.querySelector(".hh-cont").className += " alert";
           ...