Tag / Chips Input

<div class="tagi" id="tagi">
  <span class="tag">design<button aria-label="Remove">×</button></span>
  <span class="tag">frontend<button aria-label="Remove">×</button></span>
  <input id="tagInput" placeholder="Add tag…">
</div>
<div class="tag-hint">Press Enter or comma to add · Backspace to remove</div>

*{box-sizing:border-box}
.tagi{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:340px;max-width:100%;min-height:52px;padding:9px 12px;border:1px solid #d8dce6;border-radius:12px;background:#fff;font-family:system-ui,sans-serif}
.tagi:focus-within{border-color:#5b6cff;box-shadow:0 0 0 3px rgba(91,108,255,.16)}
.tag{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#ff7a18,#ff477e);color:#fff;border-radius:8px;padding:5px 6px 5px 11px;font-size:13px;font-weight:600}
.tag button{border:0;background:rgba(255,255,255,.25);color:#fff;width:18px;height:18px;border-radius:5px;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.tagi input{border:0;outline:0;flex:1;min-width:80px;font-size:14px;padding:5px}
.tag-hint{margin-top:10px;font-family:system-ui,sans-serif;font-size:12px;color:#9099ad;text-align:center}

var wrap=document.getElementById('tagi'),input=document.getElementById('tagInput');
function addTag(text){text=text.trim().replace(/,$/,'');if(!text)return;var t=document.createElement('span');t.className='tag';t.innerHTML=text.replace(/[<>&]/g,'')+'<button aria-label="Remove">×</button>';wrap.insertBefore(t,input);t.querySelector('button').onclick=function(){t.remove()}}
input.addEventListener('keydown',function(e){
  if(e.key==='Enter'||e.key===','){e.preventDefault();addTag(input.value);input.value=''}
  if(e.key==='Backspace'&&!input.value){var tags=wrap.querySelectorAll('.tag');if(tags.length)tags[tags.length-1].remove()}
});
wrap.querySelectorAll('.tag button').forEach(function(b){b.onclick=function(){b.parentElement.remove()}});