<div id="tag-container-01" class="tag-input-container" data-default-tags="java,html,php">
<div class="input-container">
<input type="text" placeholder="Type in tag name..." class="tag-input">
</div>
<div class="tags-container">
<div class="tag">
<output name="tags-01[]" value="java">Java</output>
<button type="button" class="btn btn-delete" aria-label="delete">𐄂</button>
</div>
<div class="tag">
<output name="tags-01[]" value="html">HTML</output>
<button type="button" class="btn btn-delete" aria-label="delete">𐄂</button>
</div>
<div class="tag">
<output name="tags-01[]" value="php">PHP</output>
<button type="button" class="btn btn-delete" aria-label="delete">𐄂</button>
</div>
</div>
</div>
.tags-container {
display: flex;
align-items: center;
padding: .25rem 0;
gap: .5rem;
}
button {
cursor: pointer;
}
.btn {
box-sizing: content-box;
width: .75rem;
line-height: 1.5rem;
font-size: 1.2rem;
border: 0;
border-radius: .25rem;
opacity: .5;
}
.btn-delete {
color: red;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.