JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="kek" cols="60" rows="30">
<s class="kek"><b class="kek"><r class="kek"></r></b></s>
<div class="lol"><span class="kek"></span></div>
<span class="kek"><span class="kek"></span></span>
<span class="kek"><span class="kek"></span></span>
</textarea>

JavaScript

// Single HTML-tags
var SingleTag = {
    area:1,
    base:1,
    br:1,
    col:1,
    command:1,
    embed:1,
    hr:1,
    img:1,
    input:1,
    keygen:1,
    link:1,
    meta:1,
    param:1,
    source:1,
    wbr:1,
};
var debugMark = 'data-th-debug';
var s = kek.value;
var depth = 0;
var curTag = '';

for (var i = 0; i < s.length; i++) {
	if (s[i] === '<') {
		if (s[i+1] === '/') {
			tmpTag = '';
      
      i += 2;
			
			while (s[i] !== '>') {
				tmpTag += s[i];
        i++;
			};
			
			if (tmpTag === curTag) {
				depth--;
			};
		}
		else {
			tmpTag = '';
      
      i += 1;
			
			while (s[i] !== ' ') {
				tmpTag += s[i];
        i++;
			};
      
      if (depth === 0) {
      	curTag = tmpTag;
				s = s.substr(0, i + 1) + debugMark + s.substr(i);
      };
			
			if (tmpTag === curTag) {
				depth++;
			};
		};
	};
};

kek.value = s;