JSFiddle - React, Tailwind, and code Playground

by MatyasSvejdik

HTML

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  </head>

  <body>
    <div id="main">
    </div>
    <div style="margin-left:20px; margin-top:30px">
      <div class="source" id="source">
        <div class="item" value="1.0" code="v10" style="height:100px"></div>
        <div class="item2" style="height:25px; width:25px">+</div>
        <div class="item" value="1.5" code="v15" style="height:150px"></div>
        <div class="item2" style="height:25px; width:25px">+</div>
        <div class="item" value="1.5" code="v15" style="height:80px"></div>
        <div class="item2" style="height:25px; width:25px">+</div>
      </div>
      <div class="source">
        <div class="empty" value="1.0" code="v10" style="height:255px"></div>
        <div class="item2" style="height:25px; width:25px">+</div>
        <div class="item" value="1.5" code="v15" style="height:80px"></div>
        <div class="item2" style="height:25px; width:25px">+</div>
      </div>
    </div>
  <button onclick="myFunction()">Try it</button>
  </body>

</html>

CSS

body {
  background: #0a0f37;
}

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

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



.empty {
  
  
  
}

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

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

JavaScript

function myFunction() {

  var div = document.createElement("div");
  
  div.class = ".item"
  
  div.style.width = "100px";
  div.style.height = "100px";
  div.innerHTML = "Hello";
  
  var list = document.getElementById("source");
  
  list.insertBefore(div, list.childNodes[2]);
  
}