JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head></head>
	<body>
		<div id="idP" class="classP">
            <h1>P</h1>
			<div id="idC1" class="classC1">
                <b>C1</b>
				<div id="idC11" class="classC11">
				-->C11
				</div>
				<div id="idC12" class="classC12">
				-->C12
				</div>
			</div>
			<div id="idC2" class="classC2">
                <b>C2</b>
				<div id="idC21" class="classC21">
				-->C21
				</div>
				<div id="idC22" class="classC22">
				-->C22
				</div>
			</div>		
		</div>
        <br/>
        <div id="idResults">
        
        </div>
        <br/>
        <div id="classResults">
        
        </div>
	</body>
</html>

JavaScript

$(document).ready(function(){

                startTime = new Date().getTime();
                for (i = 0; i < 10000; i++)
                {
                    s = $("#idC12");
                }           
    $("#idResults").html("c12 by id time: "+elapsedMilliseconds(startTime));
    
    startTime = new Date().getTime();
                for (i = 0; i < 10000; i++)
                {
                    s = $(".classC12");
                }           
    $("#classResults").html("c12 by class time: "+elapsedMilliseconds(startTime));
});

function elapsedMilliseconds(startTime)
            {
                var n = new Date();
                var s = n.getTime();
                var diff = s - startTime;
                return diff;
            }