JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<form action="">
    <input class="js-tagger" value="[email protected]" placeholder="EMAÖL!" type="email" data-tag-target="#tag-target" required />
    <div id="tag-target"></div>
    <input class="js-tagger" value="[email protected]" placeholder="EMAÖL!" type="email" data-tag-target="#tag-target2" required />
    <div id="tag-target2"></div>
    <input class="js-tagger" value="" placeholder="EMAÖL!" type="email" data-tag-target="#tag-target3" required />
    <div id="tag-target3"></div>
    <button>Abschickern</button>
</form>

SCSS

div {
    color: white;
    width: 200px;
    border: 1px dotted grey;
    padding: 20px;
    height: 40px;
}
.tag {
    background: none repeat scroll 0 0 #e75934;
    border-color: #f44612 #e75934 #e75934;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    font-weight: 400;
    line-height: 17px;
    padding: 8px 14px 7px;
    text-align: center;
    text-decoration: none;
    transition: all 0.5s ease 0s;
    white-space: nowrap;
    &:hover {
        background: white;
        color: grey
    }
    .tag-content {
        float:left;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tag-remove {
        text-decoration: none;
        padding: 0 5px;
        font-size: 14px;
        color: white;
        margin-left: 2px;
        float: left;
    }
    .tag-remove:hover {
        color: white;
        background: black;
        margin-left: 2px;
        float: left;
    }
}

JavaScript

(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module depending on jQuery.
        define(['jquery'], function (jQuery) {
            return factory(jQuery);
        });
    } else {
        // No AMD. Register plugin with global jQuery object.
        factory(jQuery);
    }
}(function ($) {
    'use strict';
    /**
     * @module jquery-plugin
     * @return {jQuery}
     */
    var pluginName = 'mailtagger',
        defaults = {
            /**
             * character length for user name in email
             *
             * @property nameLength
             * @type number
             */
            nameLength: 7
        };

    /**
     * __Mail-Tagger-Plugin__
     *
     * @class MailTagger
     * @constructor
     * @param element {Object} element from selection
     * @param options {Object} plugin options
     * @chainable
     */
    function MailTagger(element, options) {
        var that = this;

        that.element = element;
        that.options = $.extend({}, defaults, options);

        that._defaults = defaults;
        that._name = pluginName;

        that.init();
    }

    MailTagger.prototype = {
        /**
         * Init mailtagger
         *
         * @method init
         */
        init: function () {
            var that = this,
                element = that.element,
                options = that.options,
                tagTarget = $(element).data('tag-target');

            //add event handling for the inputs
            $(element).on('keyup', function () {
                var $this = $(this);
                that.setTag(element, options, this.value);
            }).trigger('keyup');

            //make tags deletable
            $(tagTarget).on('click touchend', 'a.tag-remove', function (e) {
                e.preventDefault();
                $(this).parent('span.tag').remove();
            });

        },
        /**
         * set tag...