JSFiddle - React, Tailwind, and code Playground

by MatyasSvejdik

HTML

<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>index demo</title>

    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  </head>


  <body>

    <div id="main">
    </div>
    <div style="margin-left:20px; margin-top:30px">
      <div class="source" id="source">
        <div class="item" data-value="4.0" data-code="LR" style="height:150px; line-height:160px">LR</div>



        <div class="item2" id="itemx100" data-value="" data-code="" style="height:25px; width:25px" onclick="makevisible(id)">+
          <div id="subitem" class="subitem" onmouseleave="makeinvisible()">

            <div class="sub2item" id="xoxo">LR
              <div class="sub3item">

                <div class="sub4item" style="margin-left: 10px" data-value="4.5" data-code="LR" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="5.0" data-code="LR" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="5.5" data-code="LR" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="6.0" data-code="LR" onmousedown="myFunction(this)"></div>
              </div>
            </div>
            <div class="sub2item" id="xoxo">R
              <div class="sub3item">

                <div class="sub4item" style="margin-left: 10px" data-value="2.0" data-code="R" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="2.5" data-code="R" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="3.0" data-code="R" onmousedown="myFunction(this)"></div>
              </div>
            </div>

            <hr class="hr">
            <div class="sub2item" id="xoxox">BR
              <div class="sub3item">

                <div class="sub4item" style="margin-left: 10px" data-value="1.0" data-code="BR" onmousedown="myFunction(this)"></div>
                <div class="sub4item" data-value="1.5" data-code="BR"...

CSS

body {
  background: #0a0f37;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.source {
  float: left;
  width: 200px
}



.empty {}

.item {
  color: #fff;
  border-style: solid;
  border-color: #fff;
  border-width: 1px;
  position: relative;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  line-height: 29px;
  width: 40px;
  height:100%;
  background-image:
  linear-gradient(45deg, transparent 45%, #fff 50%, transparent 55%, transparent 100%);
  background-size: 8px 8px;
  background-position: 10px 6px;

}

.item:hover {
  background-color: rgba(255, 255, 255, 0.3);

}

.item2 {
  color: #fff;
  background-color: #0a0f37;
  border-style: solid;
  border-color: #fff;
  border-width: 1px;
  position: relative;
  margin-top: -12.5px;
  margin-bottom: -12.5px;
  margin-left: 7.5px;
  border-radius: 12.5px;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
  z-index: 99
}

.item2:hover {
  color: #0a0f37;
  background-color: #fff;
}




.subitem {
  position: absolute;
  margin-top: -32.5px;
  display: none;
  
    border-style: solid;
  border-color: #f00;
  border-width: 1px;

}

.sub2item {
  color: #fff;
  border-style: solid;
  border-color: #fff;
  border-width: 1px;

  margin-left: 53.5px;
  margin-right: 130px;

  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  line-height: 40px;
  width: 40px;
  height: 40px;
  background-color: #0a0f37;
  background-size: 8px 8px;
  background-position: 10px 6px;

}

.sub2item:hover {
  color: #0a0f37;
  background-color: #fff;

}

.sub3item {
  position: absolute;
  margin-top: -42px;
  margin-left: 40px;
  
      border-style: solid;
  border-color: #f00;
  border-width: 1px;



}

.sub4item {
  display:inline-block;
  color: #fff;
  margin-left:5px;
  border-style: solid;
  border-color: #fff;
  border-width: 1px;


  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  line-height:...

JavaScript

var coje = 100;
var pocetplusu = 2;


function test() {
  alert("jebat");
}

function makevisible(id) {


  var x = document.getElementById(id).getElementsByClassName("subitem")[0];

  x.style.display = "block";

}

function makeinvisible() {
  var i;
  for (i = 0; i < 20; i++) {
    var x = document.getElementsByClassName("subitem")[i];
    x.style.display = "none";
  }
}



function myFunction(id) {
  var index = $(id.parentNode.parentNode.parentNode.parentNode).index();
  var i;
  for (i = 0; i < pocetplusu; i++) {
    var x = document.getElementsByClassName("subitem")[i];
    x.style.display = "none";
  }


  pocetplusu++;

  var list = document.getElementById("source");
  var el = document.getElementById("lol");




  var div = document.createElement("div");
  div.id = "room" + coje;
  div.className = "item";
  div.style.height = id.getAttribute('data-value') * 40 + "px";

  div.innerHTML = id.getAttribute('data-code');
  div.style.lineHeight = div.style.height;
  div.setAttribute("onclick", "makevisible(id)");
  div.dataset.value = id.getAttribute('data-value');
  div.dataset.code = id.getAttribute('data-code');


  var subdiv = document.createElement("div");
  subdiv.id = "subitem" + coje;
  subdiv.style.width = "200px"; //todle musi byt podle poctu elementu

  subdiv.className = "sub3item2";
  subdiv.setAttribute("onmouseleave", "makeinvisible()");
  subdiv.style.marginTop = -1 * id.getAttribute('data-value') * 40 + "px";

  var subsubdiv = document.createElement("div");
  subsubdiv.id = "olol" + coje;
  subsubdiv.className = "subroom";
  subsubdiv.setAttribute("onclick", "makedelete(id)");


  subdiv.appendChild(subsubdiv);


	var ii = 3; // pocet moznosti velikosti
  for (ii = 0; ii<4; ii++) {
  var sub2div = document.createElement("div");
  sub2div.id = "sub2" + coje + ii;
  sub2div.className = "sub4item2";
  sub2div.setAttribute("onclick", "makedelete(id)");

	
  subdiv.appendChild(sub2div);
  }
  







  div.appendChild(subdiv);

  var $add =...