JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<div class="tagcontainer"></div>

JavaScript

$('.tagcontainer').ready(function () {
    $('.tagcontainer').css({
        cursor: 'text',
        padding: '1px 0px 0px 1px',
        height: 22,
        border: 'solid black 1px',
        width: 100
    });
    $('.tagcontainer').click(function () {
        if(!$(this).children('tmp').last().is(':focus'))
        c($(this)), a($(this));
    });

    function a(e) {
        e.children('tmp').last().focus(), d(e)
    }

    function b(e) {
        e.width(function () {
            i = 1;
            e.children('tag').each(function () {
                i += $(this).outerWidth(true)
            });
            if (e.children('tag').length == 0) e.height(22);
            return i > e.parent().width() - e.position().left - 99 ? e.height('auto') : i + 99
        })
    }

    function c(e) {
        e.append('<tmp contenteditable="true"></tmp>'), e.children('tmp').last().css({
            'margin-left': 1,
            height: 19,
            outline: 'none',
            font: '16px arial, helvetica, sans-serif'
        })
    }

    function d(e) {
        e.children('tmp').last().bind('blur', function () {
            $(this).remove()
        }), e.children('tag').last().bind('click', function () {
            $(this).remove(), b(e)
        });
        e.children('tmp').last().bind('keydown', function (f) {
            if (f.keyCode != 13) {
                if (f.keyCode == 8 && !$(this).text().trim()) {
                    e.children('tag').last().remove(), b(e)
                }
                if (f.keyCode == 32) {
                    if ($(this).text().trim()) {
                        temp = $(this).text().trim().split(' ');
                        for (i = 0; i < temp.length; i++) {                       
                        e.append('<tag>' + temp[i] + '</tag>'), e.children('tag').last().css({
                            background: 'green',
                            height: 19,
                            font: 'bold 16px arial, helvetica,...