JSFiddle - React, Tailwind, and code Playground

HTML

<div class="containter">
	<div id="columns"></div>
</div>

CSS

body{
	font-family:verdana;
}
[draggable]{
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
.column{
	height: 100px;
	width: 100px;
	float:left;
	border: 1px solid #000000;
	background-color: #fff;
	margin-right: 10px;
	border-radius: 10px;
	box-shadow: inset 0 0 3px #000;
	text-align: center;
	cursor: pointer;
}
.column span {
	font-size:70px;
	color: #ccc;
	text-shadow: #000 0 1px;
	box-shadow: 5px;
	padding: 5px;
	
}
.column.over {
  border: 2px dashed #000;
}

JavaScript

var localNameSpace = {
    dragSrcEl: null
    , bindDraggables: function() {
        var cols = document.querySelectorAll('#columns .column');
        
        [].forEach.call(cols, function(col) {
        	col.addEventListener('dragstart', localNameSpace.handleDragStart, false);
        	col.addEventListener('dragenter', localNameSpace.handleDragEnter, false);
        	col.addEventListener('dragover', localNameSpace.handleDragOver, false);
        	col.addEventListener('dragleave', localNameSpace.handleDragLeave, false);
        	col.addEventListener('drop', localNameSpace.handleDrop, false);
        	col.addEventListener('dragend', localNameSpace.handleDragEnd, false);
        });
    }
    , createDraggables: function() {
        var colDiv = document.getElementById('columns');
        var divC = document.createElement('div');
    	var spanC = document.createElement('span');
        
        divC.className = 'column';
        divC.draggable = 'true';
        spanC.innerHTML = 'A';
        
        divC.appendChild(spanC);
        colDiv.appendChild(divC);
    }
    , handleDrop: function(e) {
    	if(e.stopPropagation){
    		e.stopPropagation();
	    }
		
    	if(dragSrcEl != this){
	    	localNameSpace.dragSrcEl.innerHTML = this.innerHTML;
		    this.innerHTML = e.dataTransfer.getData('text/html');
    	}
    	return false;
    }
    , handleDragEnd: function(e) {
        var cols = document.querySelectorAll('#columns .column');
    	this.style.opacity = 1;
	    
        [].forEach.call(cols, function(col){
    		col.classList.remove('over');
    	});	
    }		
    , handleDragEnter: function(e) {
    	this.classList.add('over');
    }
    , handleDragLeave: function(e) {
    	this.classList.remove('over');
    }
    , handleDragOver: function(e) {
    	if(e.preventDefault){
	    	e.preventDefault();
    	}

        e.dataTransfer.dropEffect = 'move';
	    return false;
    }
    , handleDragStart: function(e) {
    	this.style.opacity = 0.4;
	   ...