JSFiddle - React, Tailwind, and code Playground

HTML

<div id="campaignTags" ></div>

CSS

.tag_title {
	font-family: Helvetica, Arial, sans-serif;
	color: #5e5e5e;
	font-size: 16px;
	font-weight: normal;
	padding: 0;
	margin: 0;
}
.tag_title .tag_description {
	font-family: Helvetica, Arial, sans-serif;
	color: #adadad;
	font-size: 12px;
}

.tag_form {
	width: 100px;
	height: 90px;
	background: #fff;
	
	font-family: Helvetica, Arial, sans-serif;
	color: #adadad;
	font-size: 12px;
	line-height: 30px;
	padding: 5px 10px 5px 10px;
	margin: 10px 0 10px 0;
	border: 1px solid #ddd;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: text;
	
	-webkit-transition-property: color, -webkit-box-shadow;
	-moz-transition-property: color, -moz-box-shadow;
	-ms-transition-property: color, -moz-box-shadow;
	transition-property: color, -moz-box-shadow;
	
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.tag_form::-webkit-scrollbar {
	width: 5px;
	padding-left: 5px;
}

.tag_form::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: rgba(0,0,0,0.5); 
	margin-right: 10px;
}

.tag_form_tags {
	overflow-y: scroll;
}



.tag_form:hover, .tag_form:focus, .tag_form.focus  {
	border: 1px solid #9dcef6;
	color: #8ca1ad;
	-webkit-box-shadow: 0 0 10px rgba(157,206,246,.4) inset,  0 0 10px #9dcef6;
	-moz-box-shadow: 0 0 10px rgba(157,206,246,.4) inset,  0 0 10px #9dcef6;
	box-shadow: 0 0 10px rgba(157,206,246,.4) inset,  0 0 10px #9dcef6;
	
	
	-webkit-transition-property: border, color, -webkit-box-shadow;
	-moz-transition-property: border, color, -moz-box-shadow;
	-o-transition-property: border, color, box-shadow;
	-ms-transition-property: border, color, box-shadow;
	transition-property: border, color, box-shadow;
	
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	transition-duration: 0.3s;

}

input.tag_form {
	height:...

JavaScript

autocomplete_source = ["Tag 1","Tag 2", "Tag 3", "Tag 4", "Tag 5"];



(function($){ 
	$.fn.extend({ 
		tag: function() { 
			
			//Set the default options
			var defaults = {
				width: 50,
				height: 90,
				inputName: 'tags',
				key: ['enter', 'space', 'comma'],
				clickRemove: true
			};
			
			//Get the options
			var attr = arguments[0] || {};
			
			//Set the defaults if the options are undefined
			if(typeof(attr.width) === "undefined") { attr.width = defaults.width; }
			if(typeof(attr.height) === "undefined") { attr.height = defaults.height; }
			if(typeof(attr.inputName) === "undefined") { attr.inputName = defaults.inputName; }
			if(typeof(attr.key) === "undefined") { attr.key = defaults.key; }
			if(typeof(attr.clickRemove) === "undefined") { attr.clickRemove = defaults.clickRemove; }
			
			
			//Loop through each
			this.each(function(){
				
				//save the element
				var $this = $(this);
				
				//Add the tag class
				$this
					.addClass('tag_form')
					.addClass('tag_form_tags');
				
				if(attr.clickRemove) {
					$this.addClass('tag_form_click_remove');
				}

				if($.inArray('comma', attr.key) < 0) {
					$this.addClass('tag_form_prevent_comma_removal');
				}
				
				//Set the width and height
				$this.css({
					width: attr.width,
					height: attr.height
				});
				
				//Add textbox. Should be using DOM instead of this.
				$('<input type="text" value="" name="tagName" id="tagName" placeholder="Start typing tag name" class="new_tag_input" onkeydown="if(event.keyCode == 13) { return false; }" />')
					.autocomplete({
						source: autocomplete_source,
						minLength:1,
						select: function(e, ui) {
							$this.addTag(ui.item.label, ui.item.value);
						},
						close: function(e, ui) { this.value = ''; }
					})				
					//Add focus class when focused upon
					.focus(function(){ $this.addClass('focus') })
					
					//Remove focus class when blurred
					.blur(function(){ $this.removeClass('focus') })
					
					//When a...