JSFiddle - React, Tailwind, and code Playground

by zerrax

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="i">
    Name :
    <input type="text" id="myInpuqt" onkeyup="" placeholder="Search for indicators" title="Type in a name">
  </div>
  <div class="i">
    Version :
    <input type="text" id="myInputs" onkeyup="" placeholder="Search for indicators" title="Type in a name">
  </div>
<a onclick="spanw(this)" class="if">if</a>
<a onclick="spanw(this)" class="else">else</a>
<a onclick="spanw(this)" class="or">or</a>
<a onclick="spanw(this)" class="and">and</a>
<a onclick="spanw(this)" class="equal">equal</a>
 <div class="i">
    Add indicators :
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for indicators" title="Type in a name">
  </div>

<ul class="l" id="myUL">
<li><a onclick="spanw(this)" class="ADX">ADX</a></li>
<li><a onclick="spanw(this)" class="ADXpDI">ADX+DI</a></li>
<li><a onclick="spanw(this)" class="ADXmDE">ADX-DI</a></li>
<li><a onclick="spanw(this)" class="BBPower">BBPower</a></li>
<li><a onclick="spanw(this)" class="BBPower.Rec">BBPower.Rec</a></li>
<li><a onclick="spanw(this)" class="AO">AO</a></li>
<li><a onclick="spanw(this)" class="AO">AO</a></li>

<li><a onclick="spanw(this)" class="CCI20">CCI20</a></li>
<li><a onclick="spanw(this)" class="close">close</a></li>
<li><a onclick="spanw(this)" class="EMA5">EMA5</a></li>
<li><a onclick="spanw(this)" class="EMA10">EMA10</a></li>
<li><a onclick="spanw(this)" class="EMA20">EMA20</a></li>
<li><a onclick="spanw(this)" class="EMA30">EMA30</a></li>
<li><a onclick="spanw(this)" class="EMA50">EMA50</a></li>
<li><a onclick="spanw(this)" class="EMA100">EMA100</a></li>
<li><a onclick="spanw(this)"...

CSS

body, html {
  font-family: "Lato", sans-serif;
   background-color: #111;
   margin: 0;
   padding:5px;
   height: calc(100% - 10px);
}


.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  text-align: center;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.sidenav a:hover {
  color: #f1f1f1;
}


#mySidenav #myUL li a:hover:not(.header) {
  background-color: rgba(255,255,255,0.1);
}

.sidenav div.i{
  padding: 10px 0;
    color: white;
    text-align: center;
}
.sidenav ul.l{
  list-style-type: none;
  padding: 10px 25px;
  margin: 0;
}
.sidenav ul.l li a {
  padding: 12px;
  text-decoration: none;
  font-size: 14px;
  color: #eee;
  display: block;
  padding:10px 20px;
}
.sidenav div.i input{
  background: #1f1f20;
    background-image: url(/css/searchicon.png);
    background-position: 10px 12px;
    background-repeat: no-repeat;
    width: 80%;
    font-size: 16px;
    padding: 7px 12px;
    border: 1px solid #48484d;
    margin-bottom: 12px;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
  color: white;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.b{
  
}
#main {
  background: #c4c4c4;
  transition: margin-left .5s;
  border-radius:8px;
  height: 100%;
 // margin: 0 auto !important;
}
#main .menu{
  padding: 10px 20px;
  border-radius:7px 7px 0 0;
  border-bottom: 3px solid #222;
background:#29539c;
color: white;
}
#main .menu a{
    float: right;
    padding: 10px 0;
    font-size: 20px;
    cursor:pointer
}
#main .menu a:hover{
    color: rgba(255,255,255,0.5)
}
.form
@media screen and (max-height: 450px) {
 ...

JavaScript

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

function myFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}! function(a) {
  function f(a, b) {
    if (!(a.originalEvent.touches.length > 1)) {
      a.preventDefault();
      var c = a.originalEvent.changedTouches[0],
        d = document.createEvent("MouseEvents");
      d.initMouseEvent(b, !0, !0, window, 1, c.screenX, c.screenY, c.clientX, c.clientY, !1, !1, !1, !1, 0, null), a.target.dispatchEvent(d)
    }
  }
  if (a.support.touch = "ontouchend" in document, a.support.touch) {
    var e, b = a.ui.mouse.prototype,
      c = b._mouseInit,
      d = b._mouseDestroy;
    b._touchStart = function(a) {
      var b = this;
      !e && b._mouseCapture(a.originalEvent.changedTouches[0]) && (e = !0, b._touchMoved = !1, f(a, "mouseover"), f(a, "mousemove"), f(a, "mousedown"))
    }, b._touchMove = function(a) {
      e && (this._touchMoved = !0, f(a, "mousemove"))
    }, b._touchEnd = function(a) {
      e && (f(a, "mouseup"), f(a, "mouseout"), this._touchMoved || f(a, "click"), e = !1)
    }, b._mouseInit = function() {
      var b = this;
      b.element.bind({
        touchstart: a.proxy(b, "_touchStart"),
        touchmove: a.proxy(b, "_touchMove"),
        touchend: a.proxy(b, "_touchEnd")
      }), c.call(b)
    }, b._mouseDestroy =...