JSFiddle - React, Tailwind, and code Playground

HTML

<input class="btn btn-info attribute-button" name="commit" type="button" value="first_name" />
<div class="tags">
	<input type="text" name="newtag" class="newtag" placeholder="Add tags" />
</div>

CSS

.tags{
		width: 400px;
		height: 100px;
		border: 1px solid #000;
		margin: 5px;
	}
	.tag{
		padding: 1px;
		background-color: blue;
		color: #fff;
		border-radius: 3px;
		display: inline-block;
	}
	.newtag{
		border: none;
		outline: none !important;
	}

JavaScript

$(document).ready(function(){
	$(".tags, .attribute-button").click(function(){
		$(".newtag").focus();
	})
    $(".newtag").keydown(function(e){
    	if(e.which === 13 || e.which === 32 || e.which === 9){
    		e.preventDefault();
    		$(".newtag").before("<div class='tag'>"+$(".newtag").val()+"</div>");
    		$(".newtag").val("");
    	}
    });
    $(".attribute-button").click(function(){
    	$(".newtag").before("<div class='tag'>"+$(this).val()+"</div>");
    })
});