JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<div class="ccontainer">
<canvas id="cubecv" width=200 height=200></canvas>
<canvas id="acubecv" width=250 height=200></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="Выполнить"></td></tr>
        <tr><td>Инверсия</td><td><input type=text id="tReverse"/><input type=button id="bRev" value="Выполнить"></td></tr>
        <tr><td>Отражение</td><td><input type=text id="tMirror"/><input type=button id="bMirr" 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 ='1000'/></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"><br>
     </div>
     
     <div class="ccontainer">
<div>

        <span id='sAlg'>. . .</span>
   
<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>                 
        <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>  ...

CSS

input[type=text]{
  width:300px;  
  
}
textarea{        
    width:300px;
    height:100px;
}
select{
    width:611px;    
}
#sAlg{
    font-weight:bold;
    font-size:25px;
    font-family:tahoma;
	width:100%;
	height:30px;
	margin-top:10px;
	margin-bottom:10px;
	display:block;
	text-align:center;	
	background-color:#ddd;
	color:#444;
	content:"";
}
.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 16px;
    background:#e9eaeb;
    color:#707070;
}
.tabs ul li.active, .tabs ul li.active:hover{
    background:#46c765;
    color:#fff;
}
.tabs ul li.active:hover{
    background:#38be5E;
}
.tabs ul li:hover{
    background:#d6d6d7;
}
.ccontainer {
  display:block;
  float:left;
  margin:20px;
  background-color:#eee;
  border:5px solid #ccc;
  padding:5px;
}
#acubecv{
  margin-left:20px;
}
#pllcv{
	margin-left:30px;
}
#pllcv, #ollcv {
	width:150px;
	height:150px;
	float:left;
	margin-right:50px;
}
#olloccv {
	width:150px;
	height:150px;
	float:left;
}

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: "стрелка", sol: "(R' F R' F') R2 U2 y (R' F R F')" },
  { name: "стрелка", sol: "(r U R' U) (R U' R' U) R U2' r'" },
  { name: "стрелка", sol: "y2 r' U' R U' R' U R U' R' U2 r" },
  { name: "стрелка", sol: "R' F R2 B' R2' F' R2 B R'" },
  { name:...