.tag-wrapper {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
max-width: 400px;
}
.tag-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: #fff;
border: 1px solid #d1d5db;
padding: 8px;
border-radius: 8px;
min-height: 45px;
}
.tag-container:focus-within {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.tag {
background: #e0f2fe;
color: #0369a1;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.remove-tag {
cursor: pointer;
font-size: 1rem;
line-height: 1;
color: #0369a1;
}
#tagInput {
border: none;
outline: none;
flex: 1;
font-size: 0.95rem;
min-width: 120px;
padding: 4px;
}
.helper-text {
color: #9ca3af;
font-size: 0.8rem;
margin-top: 5px;
}
const tagInput = document.getElementById("tagInput");
const tagContainer = document.getElementById("tagContainer");
tagInput.addEventListener("keypress", function(e) {
if (e.key === "Enter" && this.value.trim() !== "") {
const tagText = this.value.trim();
createTag(tagText);
this.value = "";
}
});
function createTag(text) {
const tag = document.createElement("div");
tag.classList.add("tag");
tag.innerHTML = `${text} <span class="remove-tag" onclick="this.parentElement.remove()">×</span>`;
tagContainer.insertBefore(tag, tagInput);
}