JSFiddle - React, Tailwind, and code Playground

by bjorn1990

HTML

<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>

<div class="container">
  <div id="row1" class="row"> 
    <!-- Slot 1 -->
    <div id="slot1" class="slots" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="item1" src="http://tinyurl.com/rusticon1" draggable="true" ondragstart="drag(event)">
    </div>
    <!-- Slot 2 -->
    <div id="slot2" class="slots" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="item1" src="http://tinyurl.com/rusticon2" draggable="true" ondragstart="drag(event)">
    </div>
    <!-- Slot 3 -->
    <div id="slot3" class="slots" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="item1" src="http://tinyurl.com/rusticon3" draggable="true" ondragstart="drag(event)">
    </div>
    <!-- Slot 4 -->
    <div id="slot4" class="slots" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="item1" src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)">
    </div>
    <!-- Slot 5 -->
    <div id="slot5" class="slots" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="item1" src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)">
    </div>
    <!-- Slot 6 -->
    <div id="slot6" class="slots" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="item1" src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)">
    </div>
  </div>
  
    <div id="row2" class="row"> 
    <!-- Slot 1 -->
    <div id="slot11" class="slots" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="item1" src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)">
    </div>
  ...

CSS

.container{
  width: 502px;
  border: 1px solid #1a1a1a;
}

.row, .craftingtable {
  display: flex;
  flex-direction: row;
  padding: 5px;
}

.craftingtable {margin-top: 20px;}

.slots {
  height: 66px;
  flex: 1;
  padding: 5px;
  margin: 5px;
  border: 1px solid #1a1a1a;
  box-sizing: border-box;
  overflow: hidden;
}

.slots img {width: 100%;}