JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<section>
    <article data-some-attr="value">
        <header class="main-header something-else">
			Content
		</header>
		
        <main>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. <strong>Fuga</strong> incidunt minus deserunt, optio nobis atque assumenda excepturi tempora animi. Animi.
		</main>
		
        <footer>
        	<ul>
        		<li><a href="#">Some link</a></li>
        	</ul>
        </footer>
    </article>
</section>

SCSS

[data-tag] {
    &::before,
    &::after {
        font-family: Consolas, monospace;
		opacity: 0.25;
        font-size: 0.75rem;
		animation: tag-in 750ms ease 1;
		transition: opacity 250ms ease;
    }
	
    &::before {
        content: attr(data-tag);
    }
	
    &::after {
        content: attr(data-tag-close);
    }
	
	&[data-tag-break-open] {
		&::before, &::after {
			display: block;
			transform: translateX(-20px);
		}
		
		transform: translateX(20px);
	}
	
	& + [data-tag] {
		margin-top: 1em;
	}
	
	&:hover {
		&::before, &::after {
			opacity: 0.35;
		}
	}
}

@keyframes tag-in {
	0% {
		opacity: 0;
		transform: translateX(-30px);
	}
	100% {
		opacity: 0.25;
	}
}

body {
    background: #202020;
    color: #eee;
    font-family: Roboto, sans-serif;
	margin: 50px;
}

header {
	font-size: 1.25em;
	font-weight: 700;
}

a {
	color: #a5e8a4;
}

JavaScript

console.clear();

(function() {
    var elements = document.querySelectorAll("body *");

    const getDepth = function(el) {
        let depth = -1;

        while (!el.isSameNode(document.body)) {
            ++depth;
            el = el.parentNode;
        }

        return depth;
    };
	
    elements.forEach(el => {
		let style = window.getComputedStyle(el);
		let depth = getDepth(el);
		let html = el.outerHTML;
		let closeTag = RegExp(`(</${el.tagName}>)`, "i"); // Sorry Zalgo
		let tagParts = el.cloneNode(false).outerHTML.split(closeTag);
		
		let tag = {
			open: tagParts.slice(0, -2).join(""),
			close: tagParts.slice(-2)[0]
		};
		
		tag.openBreak = RegExp(`^${tag.open}\n`, "i").test(html);
		
        el.setAttribute("data-tag", tag.open);
		el.setAttribute("data-tag-close", tag.close);
		
		if (tag.openBreak) {
			el.setAttribute("data-tag-break-open", true);
		}
    });
}());