.ctc-rem { display: flex; flex-wrap: wrap; gap: 8px; }
.ctc-rem-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 14px; background: rgba(124,108,255,0.14); color: #c4b5fd; border: 1px solid rgba(124,108,255,0.3); border-radius: 999px; font: 600 12px/1 system-ui, sans-serif; cursor: pointer; transition: opacity 0.2s, transform 0.2s; }
.ctc-rem-chip:hover { background: rgba(124,108,255,0.22); }
.ctc-rem-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.08); font-size: 14px; line-height: 1; transition: background 0.15s; }
.ctc-rem-chip:hover .ctc-rem-x { background: rgba(255,255,255,0.18); }
.ctc-rem-chip:has(:checked) { display: none; } <div class="ctc-rem">
<label class="ctc-rem-chip">
<input type="checkbox" hidden />
<span>React</span>
<span class="ctc-rem-x" aria-hidden="true">×</span>
</label>
<label class="ctc-rem-chip">
<input type="checkbox" hidden />
<span>TypeScript</span>
<span class="ctc-rem-x" aria-hidden="true">×</span>
</label>
<label class="ctc-rem-chip">
<input type="checkbox" hidden />
<span>Astro</span>
<span class="ctc-rem-x" aria-hidden="true">×</span>
</label>
</div>