JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    /*Prototype script: */
    
function TagEditor(tagListID) {
	this.tagList = document.getElementsByClassName('tagList').item(tagListID);
	this.edit = false;
	this.tagInput = this.tagList.querySelectorAll('[name=tagInput]');
	this.tagOutput = this.tagList.querySelectorAll('[name=tags]');
	this.tagInput.addEventListener('keyup', this.tagOnKeyPress(event.keyCode));
	this.tagList.addEventListener('mouseout', function() {if(tagList.ownerDocument.activeElement.parentNode !== tagList && !isHover(tagList)) {tagList.style.maxHeight = '40px';}});
	this.tagInput.addEventListener('focus', this.changeSize);
	this.tagInput.addEventListener('blur', this.changeSize);
	for(var i = 2; i < tagList.childNodes.length; i++) {
		tagList.childNodes[i].addEventListener('click', tagOnClick);
		tagList.childNodes[i].addEventListener('mousemove', tagOnMouseMove);
		tagList.childNodes[i].addEventListener('mouseout', tagOnMouseOut);
	}
};
TagEditor.prototype.tagOnKeyPress = function(keyCode) {
	var tagInputValue = this.tagInput.value.trim();
	if(tagInputValue.length !== 0) {
		if(edit) {
			if(keyCode === 13) {
				edit = false;
				editTag.style.borderColor = '#ddd';
				tagInput.value = '';
				return;
			}
			tagOutput.value = tagOutput.value.replace(editTag.innerHTML,tagInputValue);
			newTag = editTag;
		} else {
			if(keyCode !== 13) return;
			tagOutput.value = tagOutput.value + tagInputValue + ';';
			var newTag = document.createElement('div');
			newTag.addEventListener('click', tagOnClick);
			newTag.addEventListener('mousemove', tagOnMouseMove);
			newTag.addEventListener('mouseout', tagOnMouseOut);
		}
		newTag.innerHTML = tagInputValue;
		this.tagList.appendChild(newTag);
	}
	if(!edit) tagInput.value = '';
};
TagEditor.prototype.tagOnClick = function() {
	if((this.offsetWidth + getOffsetLeft(this) - event.pageX) < parseInt(this.style.backgroundSize, 10)) {
		tagOutput.value = tagOutput.value.replace(this.innerHTML +...

CSS

/*Single Edition*/
#tagList {
	position: relative;
	overflow: hidden;
	height: auto;
	width: 200px;
	padding: 10px;
	padding-right: 0;
	background-color: white;
	border-radius: 3px;
	border: thin solid #ddd;
	padding-bottom: 30px;
	max-height: 40px;
}
#tagList textarea {
	position: absolute;
	height: 11pt;
	width: 202px;
	resize: none;
	overflow: hidden;
	bottom: 0;
	left: 0;
	padding: 3px;
	font-size: 11pt;
	color: #5e5e5e;
	opacity: 0.8;
	background: -moz-linear-gradient(bottom,rgba(255, 255, 255, 0),#BBEEAA); /* Firefox */
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, 0)),to(#BBEEAA)); /* Chrome, Safari */
}
#tagList div {
	/*special settings*/
	display: inline-block;
	/*relative position*/
	margin-bottom: 10px;
	margin-right: 10px;
	padding: 3px;
	padding-right: 22px;
	/*design*/
	border-radius: 3px;
	font-size: 11pt;
	color: #5e5e5e;
	border: thin solid #ddd;
	background-image: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/delete.png');
	background-size: 18px;
	background-position: right center;
	background-repeat: no-repeat;
	background-color: white;
	transition-duration: 250ms;
	transition-property: border-color, background-size;
}
#tagList div:hover {
	border-color: #aaa !important;
}
/*Multiple Edition*/
.tagList {
	position: relative;
	overflow: hidden;
	height: auto;
	width: 200px;
	padding: 10px;
	padding-right: 0;
	background-color: white;
	border-radius: 3px;
	border: thin solid #ddd;
	padding-bottom: 30px;
	max-height: 40px;
}
.tagList textarea {
	position: absolute;
	height: 11pt;
	width: 202px;
	resize: none;
	overflow: hidden;
	bottom: 0;
	left: 0;
	padding: 3px;
	font-size: 11pt;
	color: #5e5e5e;
	opacity: 0.8;
	background: -moz-linear-gradient(bottom,rgba(255, 255, 255, 0),#BBEEAA); /* Firefox */
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, 0)),to(#BBEEAA)); /* Chrome, Safari */
}
.tagList div {
	/*special settings*/
	display:...

JavaScript

//Why isn't tagInput defined in tagOnKeyPress???

//Error message: Cannot read property 'value' of undefined
//               Cannot read property 'trim' of undefined