@arif-un/react-mix-tag-input/src/MixInput.css

A simple react component for inputting tags with a mix of text

.mix-input{
  padding: .375rem;
  border: 1px solid #ccc;
  min-height: 27px;
  border-radius: .25rem;
  display: block;
  font-size: 1rem;
}

.mi-disabled{
  background-color: #f3f3f3;
  color: #666;
}

.mix-input:focus{
  border: 1px solid #000;
}

.mix-input:hover {
  border: .0625rem solid #aaa;
}

.mix-input p.is-editor-empty:not(:has([data-type="tag"]:first-child))::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.mi-paragraph{
  margin: 0;
  min-height: 27px;
  line-height: 1.6;
}

.mi-tag{
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 2px 3px;
  margin-inline: 3px;
}