JSFiddle - React, Tailwind, and code Playground

by Roman Fedytskyi

HTML

<body>
  <div class="first-column" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div class="element element1" draggable="true" ondragstart="drag(event)" id="el1"></div>
  </div>
  <div class="second-column" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div class="element element2" draggable="true" ondragstart="drag(event)" id="el2"></div>
  </div>
  
  <script>
  function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
  </script>
</body>

CSS

body {
  display: flex;
  flex-direction: row;
}

.first-column,
.second-column{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 2px solid;
  width: 200px;
  height: 1000px;
  margin-left: 20px;
}

.second-column {
  max-width: 100px;
}

.element {
  max-width: 200px;
  min-width: 100px;
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}

.element1 {
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 10px,
    rgba(0, 0, 0, 0.3) 10px,
    rgba(0, 0, 0, 0.3) 20px
  )
}

.element2 {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  )
}