JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cube"></div>
<pre id="a"></pre>

CSS

.X {background-position: 0px 0px;           /*white*/}
        .Y {background-position: -100px 0px;        /*orange*/}
        .Z { background-position: -40px 0px;        /*green*/}
        .A {  background-position: -80px 0px;       /*red*/}
        .B { background-position: -20px 0px;        /*yellow*/}
        .C {  background-position: -60px 0px;       /*blue*/}
        .clear {  background-position: -120px 0px;  /*clear*/}
        
        .cubie {                                    /*shared*/
            width:20px;
            height:20px;
            background-image:url(http://www.cubesupply.com/sprite.jpg);
            display:inline-block;
            margin-left:-5px;
            margin-top:-5px;
        }
        #a { display:none;
        }

JavaScript

function refreshCube() {

        var textcube=document.getElementById('a').innerHTML;                        //read the text version
        
        var htmlCube = textcube.replace(/\n/g, '</br>');                            //line breaks
        htmlCube = htmlCube.replace(/ /g, ' <span class="cubie clear"></span>');    //spaces
        htmlCube = htmlCube.replace(/A/g, '  <span class="cubie A"></span> ');      //A
        htmlCube = htmlCube.replace(/B/g, '  <span class="cubie B"></span> ');      //B
        htmlCube = htmlCube.replace(/C/g, '  <span class="cubie C"></span> ');      //C
        htmlCube = htmlCube.replace(/X/g, '  <span class="cubie X"></span> ');      //X
        htmlCube = htmlCube.replace(/Y/g, '  <span class="cubie Y"></span> ');      //Y
        htmlCube = htmlCube.replace(/Z/g, '  <span class="cubie Z"></span> ');      //Z

        document.getElementById('cube').innerHTML = htmlCube;
    
    }

a=document.getElementById('a');w="innerHTML";h='   XXX\n';i='YYYZZZAAA\n';j='   BBB\n';k='   CCC\n';a[w]=h+h+h+i+i+i+j+j+j+k+k+k;function r(b,c,d,e){g=a[w].split("");f=g[b];g[b]=g[e];g[e]=g[d];g[d]=g[c];g[c]=f;a[w]=g.join("")}window.onkeydown=d;function d(e){q=e.keyCode||e;if(q==38){r(10,4,12,18);r(17,3,5,19);r(24,21,91,27);r(25,22,90,28);r(26,23,89,29)}if(q==39){d(38);r(34,31,84,37);r(35,32,83,38);r(36,33,82,39);r(54,68,70,56);r(55,61,69,63);r(44,41,77,47);r(45,42,76,48);r(46,43,75,49)}if(q==40){r(3,24,54,75);r(10,34,61,82);r(17,44,68,89);r(4,25,55,76);r(11,35,62,83);r(18,45,69,90);r(5,26,56,77);r(12,36,63,84);r(19,46,70,91);r(27,47,49,29);r(28,37,48,39);r(23,43,41,21);r(33,42,31,22)}if(q==37){for(i=0;i++<99;)d(0|Math.random()*3+38)}    
                                                                                                                                                                                                                                                                   refreshCube(); //per keypress
                      ...