JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="input-tags" class="input-tags" placeholder="Введите теги через запятую ...">
<small>Доступные: WiFi, машина, паркинг, еда, собака, рабочее место</small>
<div id="tag-list" class="tag-list"></div>

CSS

.input-tags {
  width: 100%;
  height: 36px;
  border: 0;
  outline: 0;
}

.tag-list {
  border-top: 1px solid #eee;
  padding: 10px 0;
  margin-top: 5px;
}

.tag-list__item {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  display: inline-block;
  margin: 6px;
  background: url(https://habrastorage.org/webt/5e/ca/65/5eca652b10821837951672.png) no-repeat;
}

.tag-list__item:hover {
  box-shadow: 0 0 1px 1px lightblue;
}

JavaScript

document.getElementById('input-tags').oninput = function(e) {
  let bgPosMap = {
    'wifi': '0 0',
    'машина': '-32px 0',
    'паркинг': '-64px 0',
    'еда': '-96px 0',
    'собака': '-128px 0',
    'рабочее место': '-160px 0'
  };
  let tagsHtml = '';
    
  this.value
    .toLowerCase()
    .replace(/\s?\,\s?/g, ',')
    .split(',')
    .map(tagName => {
      if (tagName in bgPosMap) {
        tagsHtml += `<span style="background-position: ${bgPosMap[tagName]}" class="tag-list__item" title="${tagName}"></span>`;
      }
    });

  document.getElementById('tag-list').innerHTML = tagsHtml;
};