<div class="tag-input-wrap">
  <label class="input-label">Tags</label>
  <div class="tag-input-box" id="tagBox" onclick="document.getElementById('tagInput').focus()">
    <span class="tag-pill">Design <button onclick="removeTag(this)" class="tag-remove">×</button></span>
    <span class="tag-pill">CSS <button onclick="removeTag(this)" class="tag-remove">×</button></span>
    <input
      class="tag-input" id="tagInput" type="text"
      placeholder="Add tag..." maxlength="24"
      onkeydown="handleTagKey(event)"
    />
  </div>
  <p class="input-hint">Press Enter or comma to add a tag</p>
</div>

<style>
.tag-input-box {
  display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center;
  padding: 0.5rem 0.625rem; min-height: 2.75rem;
  border: 1px solid var(--border); border-radius: 0.5rem;
  background: var(--surface); cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tag-input-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.tag-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid rgba(196,100,10,0.2);
  padding: 0.125rem 0.5rem; border-radius: 9999px;
  font-size: 0.8125rem; font-weight: 500;
}
.tag-remove {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 1rem; line-height: 1; padding: 0;
  opacity: 0.7;
}
.tag-remove:hover { opacity: 1; }
.tag-input { border: none; outline: none; background: none; font-size: 0.875rem; min-width: 80px; flex: 1; }
</style>

<script>
function handleTagKey(e) {
  if (e.key === 'Enter' || e.key === ',') {
    e.preventDefault();
    const val = e.target.value.trim().replace(',','');
    if (!val) return;
    const pill = document.createElement('span');
    pill.className = 'tag-pill';
    pill.innerHTML = `${val} <button onclick="removeTag(this)" class="tag-remove">×</button>`;
    document.getElementById('tagBox').insertBefore(pill, e.target);
    e.target.value = '';
  }
}
function removeTag(btn) { btn.parentElement.remove(); }
</script>