<div class="input-tags">
	<span class="tags"></span>
	<input type="text" placeholder="Add tags here...">
	<div class="dropdown">

	</div>
</div>
html {
	height: 100%;
}

body {
	font-family: sans-serif;
	font-size: 14px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.input-tags {
	border: 1px solid lightgrey;
	border-radius: 6px;
	outline-style: none;
	display: flex;
	align-items: center;
	padding: 0.8em 1.2em;
	width: 50%;
	font-size: 20px;

	input {
		border: none;
		padding: 10px 0;
		outline-style: none;
		font-size: 20px;
		width: 100%;
	}
	
	.tag {
		background-color: lightgrey;
		padding: 0.6em;
		border-radius: 4px;
		margin-right: 0.4em;
		flex-grow: 2;
		
		&:last-child {
			margin-right: 0.6em
		}
	}
}

View Compiled
$(".input-tags").on('keydown', addTag);

function addTag(evt) {
	const tag = evt.target.value;
	console.log(evt.key);
	if(evt.key =='Enter' || evt.key == 13) {
		const tagTrim = tag.trim() 
		if(tagTrim != "") {
			// Add tag
			$(".input-tags .tags").append("<span class='tag'>"+tagTrim+"</span>");
			// Empty input
			evt.target.value = '';
		}
	} else if (evt.key == "Backspace" || evt.key == 8) {
		if (tag == "") { // If empty
			// Remove last tag
			$(".input-tags .tags .tag").last().remove()
		}
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js