JSFiddle - React, Tailwind, and code Playground

HTML

Doesn't work:
     <div>
            <p class="error" seq="Error #1" ></p>
            <p class="error" seq="Error #2">2</p>
    		<p class="error" seq="Error #3">3</p>
    		<p class="error" seq="Error #4"></p>
            <div><b> Some text here  </b>
    	<p></p>
<hr/>
Works fine:
     <div>
            <p class="error" seq="Error #1" >1</p>
            <p class="error" seq="Error #2">2</p>
    		<p class="error" seq="Error #3">3</p>
    		<p class="error" seq="Error #4"></p>
            <div><b> Some text here  </b>
    	<p></p>
    	
    </div>

CSS

.error:not(:empty):first-of-type::before {
        content: attr(seq);
        display: block;
		background-color:red;
}