JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<canvas id="cubecv" width=200 height=200></canvas>
<canvas id="acubecv" width=200 height=150></canvas>
<canvas id="oscubecv" width=100 height=100></canvas>
<br><br>
    <table>
        <tr><td>Алгоритм</td><td><input type=text id="tAlg"/><input type=button id="bAlg" value="Выполнить"><span id='snAlg'> </span></td></tr>
        <tr><td>Инверсия</td><td><input type=text id="tReverse"/><input type=button id="bRev" value="Выполнить"></td></tr>
        <tr><td>Алгоритм</td><td><textarea id="taAlg"/></textarea><input type=button id="btaAlg" value="Выполнить"></td></tr>
        <tr><td>Скорость</td><td><input type=text id="tDly" value ='50'/></td></tr>
    </table>
        <br>
<input type=button id="bRpll" value="Random PLL">  
<input type=button id="bRoll" value="Random OLL">
<input type=button id="bRf2l" value="Random F2L">    
<input type=button id="bRolloh" value="Random OLL OH">      
<input type=button id="bInit" value="Init">
<input type=button id="bSolve" value="Solve">    <br>
     
    <br><br>
        <span id='sAlg'></span>
        <br><br>
    
<canvas id="pllcv" width=150 height=150 style='float:left;margin-right:50px;'></canvas>        
<canvas id="ollcv" width=150 height=150 style='float:left;margin-right:50px;'></canvas>    
<canvas id="olloccv" width=150 height=150 style='float:left;'></canvas>         
        <div style='clear:both'></div>
        <br><br>
 <div class="tabs">
    <ul>
        <li>PLL</li>
        <li>PLL OH(П)</li>
        <li>PLL OH(Л)</li>
        <li>OLL</li>
        <li>OLL OH(П)</li>
        <li>OLL OH(Л)</li>
        <li>F2L</li>
    </ul>
    <div>
        <div>   <select id="PLLlist" size=21>   </select>  </div>
        <div> <select id="PllOHrList" size=21>   </select>  </div>
        <div> <select id="PllOHlList" size=21>   </select>  </div>  
        <div>  <select id="OllList" size=21>   </select>  </div>
        <div>  <select id="OllOHrList" size=21>   </select>  </div>
        <div>  <select id="OllOHlList" size=21>  ...

CSS

input[type=text]{
  width:300px;  
  
}
textarea{        
    width:300px;
    height:100px;
}
select{
    width:611px;    
}
#sAlg{
     font-weight:bold;
    font-size:25px;
    font-family:tahoma;
}
.tabs{
    display:inline-block;
}
.tabs > div{
    padding-top:10px;
}
.tabs ul{
    margin:0px;
    padding:0px;
}
.tabs ul:after{
    content:"";
    display:block;
    clear:both;
    height:5px;
    background:#46c765;
}
.tabs ul li{
    margin:0px;
    padding:0px;
    cursor:pointer;
    display:block;
    float:left;
    padding:10px 15px;
    background:#e9eaeb;
    color:#707070;
}
.tabs ul li.active, .tabs ul li.active:hover{
    background:#46c765;
    color:#fff;
}
.tabs ul li:hover{
    background:#d6d6d7;
}

JavaScript

window.onerror = function(message, url, lineNumber) {
    alert("Error!\n" +
      "Сообщение: " + message + "\n(" + url + ":" + lineNumber + ")");
  };
(function($){				
    jQuery.fn.lightTabs = function(options){
        
        var createTabs = function(){
            tabs = this;
            i = 0;
            
            showPage = function(i){
                $(tabs).children("div").children("div").hide();
                $(tabs).children("div").children("div").eq(i).show();
                $(tabs).children("ul").children("li").removeClass("active");
                $(tabs).children("ul").children("li").eq(i).addClass("active");
            }
            
            showPage(0);				
            
            $(tabs).children("ul").children("li").each(function(index, element){
                $(element).attr("data-page", i);
                i++;                        
            });
            
            $(tabs).children("ul").children("li").click(function(){
                showPage(parseInt($(this).attr("data-page")));
            });				
        };		
        return this.each(createTabs);
    };	
})(jQuery);
$(document).ready(function(){
    $(".tabs").lightTabs();
});
var oll= [{ name:"T короткая", sol:"F (R U R' U') F'"}, 
          { name:"Т длинная", sol:"(R U R' U') (R' F R F')"},
          { name:"уши", sol:"(r U R' U') (r' F R F')"},
          { name:"глаза", sol:"R2 [D (R' U2) R] [D' (R' U2) R']"},
          { name:"глаза х2", sol:"y (R' U' R) U' (R' U R) U' (R' U2 R)"},           
          { name:"мягкий знак", sol:"f (R U R' U') f'"},
          { name:"мягкий знак", sol:"f' (L' U' L U) f"},
          { name:"мягкий знак", sol:"R d L' d' R' U R B R'"},
          { name:"мягкий знак", sol:"R' U' F U R U' R' F' R"},
          { name:"палка", sol:"f (R U R' U') (R U R' U') f'"},
          { name:"стрелка", sol:"F (R U R' U') (R U R' U') F'"},
          { name:"стрелка", sol:"F' (L' U' L U) (L' U' L U) F"},
          { name:"стрелка",...