<button class="ccb-tag" aria-label="Remove tag">React<span class="ccb-tag-x"></span></button>

.ccb-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 18px;
  border: none;
  background: rgba(124,108,255,0.15);
  color: #a78bfa;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
  transition: background 0.2s, color 0.2s;
}
.ccb-tag:hover { background: rgba(124,108,255,0.3); color: #fff; }
.ccb-tag-x {
  position: relative;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: inline-block;
  transition: background 0.2s;
}
.ccb-tag-x::before, .ccb-tag-x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 7px; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
.ccb-tag-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-tag-x::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-tag:hover .ccb-tag-x { background: rgba(255,255,255,0.3); }