JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">

    <title>Responsive Tags Input - Bootsnipp.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

  </head>

  <body>
    <title>Responsive Tags Input</title>
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


    <div class="container">
      <form id="form" method="post">
        <h2 class="text-center" style="margin-bottom:25px;">Responsive Tags Input With Autocomplete Examples</h2>

        <label>Tags input with autocomplete:</label>
        <input id="form-tags-4" name="tags-4" type="text" value="">
        <div id="form-tags-4_tagsinput" class="tagsinput" style="width: auto; min-height: auto; height: auto; display: none;">
          <div id="form-tags-4_addTag">
            <input name="form-tags-4_tag" id="form-tags-4_tag" class="tag-input ui-autocomplete-input" value="" autocomplete="off">
          </div>
        </div>
        <input id="user-tags" name="tags" type="text" value="" style="display: none;">
        <div class="form-group">
          <input type="submit" name="submit-btn" id="submit-btn" value="Soumettre" />
        </div>
      </form>
    </div>
    <ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none;"></ul>
    <div role="status" aria-live="assertive" aria-relevant="additions"...

CSS

* {
          box-sizing: border-box;
        }

        html {
          height: 100%;
          margin: 0;
        }

        body {
          min-height: 100%;
          font-family: 'Roboto';
          margin: 0;
          background-color: #fafafa;
        }

        .container {
          margin: 150px auto;
          max-width: 960px;
        }

        label {
          display: block;
          padding: 20px 0 5px 0;
        }

        .tagsinput,
        .tagsinput * {
          box-sizing: border-box
        }

        .tagsinput {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          background: #fff;
          font-family: sans-serif;
          font-size: 14px;
          line-height: 20px;
          color: #556270;
          padding: 5px 5px 0;
          border: 1px solid #e6e6e6;
          border-radius: 2px
        }

        .tagsinput.focus {
          border-color: #ccc
        }

        .tagsinput .tag {
          position: relative;
          background: #556270;
          display: block;
          max-width: 100%;
          word-wrap: break-word;
          color: #fff;
          padding: 5px 30px 5px 5px;
          border-radius: 2px;
          margin: 0 5px 5px 0
        }

        .tagsinput .tag .tag-remove {
          position: absolute;
          background: 0 0;
          display: block;
          width: 30px;
          height: 30px;
          top: 0;
          right: 0;
          cursor: pointer;
          text-decoration: none;
          text-align: center;
          color: #ff6b6b;
          line-height: 30px;
          padding: 0;
          border: 0
        }

        .tagsinput .tag .tag-remove:after,
        .tagsinput .tag .tag-remove:before {
          background: #ff6b6b;
          position: absolute;
          display: block;
          width: 10px;
        ...

JavaScript

$(function() {
	var input = $('#form-tags-4').tagsInput({
  	'autocomplete': {
    	source: function(request, response) {
      	$.getJSON('dishes.php', {query: request.term, input:input.val()}, response)
    	},
    }
  });
});

/* jQuery Tags Input Revisited Plugin
 *
 * Copyright (c) Krzysztof Rusnarczyk
 * Licensed under the MIT license */

(function($) {
	var delimiter = [];
	var inputSettings = [];
	var callbacks = [];

	$.fn.addTag = function(value, options) {
		options = jQuery.extend({
			focus: false,
			callback: true
		}, options);
		
		this.each(function() {
			var id = $(this).attr('id');

			var tagslist = $(this).val().split(_getDelimiter(delimiter[id]));
			if (tagslist[0] === '') tagslist = [];

			value = jQuery.trim(value);
			
			if ((inputSettings[id].unique && $(this).tagExist(value)) || !_validateTag(value, inputSettings[id], tagslist, delimiter[id])) {
				$('#' + id + '_tag').addClass('error');
				return false;
			}
			
			$('<span>', {class: 'tag'}).append(
				$('<span>', {class: 'tag-text'}).text(value),
				$('<button>', {class: 'tag-remove'}).click(function() {
					return $('#' + id).removeTag(encodeURI(value));
				})
			).insertBefore('#' + id + '_addTag');

			tagslist.push(value);

			$('#' + id + '_tag').val('');
			if (options.focus) {
				$('#' + id + '_tag').focus();
			} else {
				$('#' + id + '_tag').blur();
			}

			$.fn.tagsInput.updateTagsField(this, tagslist);

			if (options.callback && callbacks[id] && callbacks[id]['onAddTag']) {
				var f = callbacks[id]['onAddTag'];
				f.call(this, this, value);
			}
			
			if (callbacks[id] && callbacks[id]['onChange']) {
				var i = tagslist.length;
				var f = callbacks[id]['onChange'];
				f.call(this, this, value);
			}
		});

		return false;
	};

	$.fn.removeTag = function(value) {
		value = decodeURI(value);
		
		this.each(function() {
			var id = $(this).attr('id');

			var old = $(this).val().split(_getDelimiter(delimiter[id]));

			$('#' + id + '_tagsinput...