JSFiddle - React, Tailwind, and code Playground

HTML

<div class="actions-panel">
			<span id="remove-column" class="icon icon-small taskboard-action" title="Remove Column">
				<span class="icon-minus"></span>
			</span>
			<span id="add-column" class="icon icon-small taskboard-action" title="Add Column">
				<span class="icon-plus"></span>
			</span>
			<span id="load-task" class="icon icon-small taskboard-action" title="Load Taskboard">
				<span class="icon-upload"></span>
			</span>
			<span id="save-task" class="icon icon-small taskboard-action" title="Save Taskboard">
				<span class="icon-download"></span>
			</span>
			<span id="create-task" class="icon icon-small taskboard-action" title="Add Task">
				<span class="icon-file"></span>
			</span>
			<input type="file" id="files" name="files[]" single />
		</div>
		<h1 class="taskboard-title">WorkFlow</h1>
		<div id="taskboard">
			<div class="column">
				<h5 class='column-title'>To Do</h5>
				<div class="task-holder"></div>
			</div>
			<div class="column">
				<h5 class='column-title'>In Progress</h5>
				<div class="task-holder"></div>
			</div>
			<div class="column">
				<h5 class='column-title'>Awaiting Merge</h5>
				<div class="task-holder"></div>
			</div>
			<div class="column">
				<h5 class='column-title'>Done</h5>
				<div class="task-holder"></div>
			</div>
		</div>

CSS

body {
	background-color: whitesmoke;
}
h5 {
	border-bottom: thin solid black;
    font-size: 16px;
    font-weight: bold;
    margin: 0 auto;
    margin-bottom: 25px;
    text-align: center;
    width: 70%;
}
#taskboard{
	height: 400px;
	width: 100%;
}
.column {
	width: 25%;
	height: 100%;
	float: left;
}
.task-holder.over {
	border: 2px dashed #000;
}
.task{
	width: 90%;
	height: 100px;
	margin: 0 0 5px;
	background: yellow;
	cursor: move;
	padding: 5%;
	position: relative;
	border: solid thin black;
	border-radius: 0px 0px 26px 0px;
	text-align: center;
	box-shadow: 5px 5px 10px #888888;
}
.task:after {
    border-color: black transparent transparent black;
    border-image: none;
    border-style: solid;
    border-width: thin;
    bottom: 0;
    content: "";
    height: 20px;
    margin: 1px;
    position: absolute;
    right: 0;
    width: 20px;
    background-color: yellow;
    border-radius: 0px 0px 20px 0px;
}
.taskboard-action{
	margin: 10px 10px 10px 10px;
}
.taskboard-action:hover{
	font-size: 1.5em;
	color: black;
}
.taskboard-title{
	position: absolute;
	right: 200px;
	top: -15px;
	color: black;
}
.task-holder{
	width: 90%;
	height: 100%;
	margin: 0 auto;
}
textarea {
	resize: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/*background: yellow;*/
	border: none;
}
textarea:focus{
	background: yellow;
}
.actions-panel {
	float: right;
	height: 50px;
	width: 100%;
}
.close {
	padding: 0 5px 0 0;
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}
.actions-panel * {
	float: right;
}
input[type='file']{
	display: none;
}




/*icons*/
.icon {
	/* don't change width and height in order to change the size of the icon,
	you can control the size with font-size for different class(es) - below */
	line-height: 100%;
	width: 1em;
	height: 1em;
	position: relative;
	display: block;
	/*float: left;*/
}
/* Button like icons */
.icon-square,
.icon-rounded {
	border: .75em solid rgb(242, 242, 242); /* #f2f2f2 */
	background-color: rgb(242, 242,...

JavaScript

var workflow = {};
workflow.taskboard = (function () {
	var _dragTask = null,
		_editTask = function (task) {
			var editMode = task.getAttribute('editmode');
			if (editMode === "true") {
				var taskDesc = task.getElementsByTagName('textarea')[0];
				var description = taskDesc.value;
				task.removeChild(taskDesc);
				task.setAttribute('editmode', false);
				task.getElementsByClassName('task-content')[0].innerHTML = description;
			} else {
				task.setAttribute('editmode', true);
				var taskDescription = document.createElement('textarea');
				taskDescription.value = task.getElementsByClassName('task-content')[0].innerHTML;
				task.getElementsByClassName('task-content')[0].innerHTML = '';
				taskDescription.addEventListener('blur', function () {
					var taskDesc = task.getElementsByTagName('textarea')[0];
					var description = taskDesc.value;
					task.removeChild(taskDesc);
					task.setAttribute('editmode', false);
					task.getElementsByClassName('task-content')[0].innerHTML = description;
				}, false);
				task.appendChild(taskDescription);
				taskDescription.focus();
			}
		},
		_editColumnTitle = function (columnTitle) {
			var editMode = columnTitle.getAttribute('editmode');
			if (editMode === "true") {
				var newTitleInput = columnTitle.getElementsByTagName('input')[0];
				var newTitle = newTitleInput.value;
				columnTitle.removeChild(newTitleInput);
				columnTitle.setAttribute('editmode', false);
				columnTitle.innerHTML = newTitle;
			} else {
				columnTitle.setAttribute('editmode', true);
				var newTitleInput = document.createElement('input');
				newTitleInput.setAttribute('type', 'text');
				newTitleInput.value = columnTitle.innerHTML;
				columnTitle.innerHTML = '';
				newTitleInput.addEventListener('blur', function () {
					var newTitleInput = columnTitle.getElementsByTagName('input')[0];
					var newTitle = newTitleInput.value;
					columnTitle.removeChild(newTitleInput);
					columnTitle.setAttribute('editmode',...