JSFiddle - React, Tailwind, and code Playground

by Krishna Gopinath

HTML

TextBox 1 :
<input type="textbox" id="textBox"></input>
<br/>TextBox 2 :
<div class="target" contenteditable="true"></div>

CSS

body {
    font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
}
.tag {
    color: #3E6D8E;
    background-color: #E0EAF1;
    border-bottom: 1px solid #b3cee1;
    border-right: 1px solid #b3cee1;
    padding: 3px 4px 3px 4px;
    margin: 2px 2px 2px 0;
    text-decoration: none;
    font-size: 90%;
    line-height: 2.4;
    white-space: nowrap;
}
.tag:hover {
    background-color: #c4dae9;
    border-bottom: 1px solid #c4dae9;
    border-right: 1px solid #c4dae9;
    text-decoration: none;
}

JavaScript

$("#textBox").keypress(function (e) {
    if (e.which === 32) {
        $(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
        this.value = "";
    }
});