JSFiddle - React, Tailwind, and code Playground

HTML

<pre>
<div dir="ltr" class="contenteditable" contenteditable="true">some
<div><span class="red tag" contenteditable="false" unselectable="on"><span class="tag-body"><span class="id">ID</span> TAG</span></span> <span class="orange tag" contenteditable="false" unselectable="on"><span class="tag-body"><span class="id">ID</span> TAG</span></span> text</div></div>
</pre>

SCSS

.tag {
  display: inline-block;
  padding: 5px 5px;
}

.tag-body {
  padding: 3px;
  border-radius: 4px;
}

.red .tag-body {
  background-color: red;
}
.orange .tag-body {
  background-color: orange;
}

.id {
  color: white;
}