JSFiddle - React, Tailwind, and code Playground

HTML

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div id="div">
    <p id="p"></p>
</div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

<h1>$('div p')</h1>
<h2 id="first"></h2>
<h1>$('div').find('p')</h1>
<h2 id="second"></h2>
<h1>$('#div p')</h1>
<h2 id="third"></h2>
<h1>$('div #p')</h1>
<h2 id="fourth"></h2>
<h1>$('#div #p')</h1>
<h2...

CSS

* { font-family: sans-serif }

JavaScript

var n = 50000;
var dt = 0;

for (var i=0; i<n; i++){

    var t = new Date().getTime();
    
    var $element = $('div p');
      
    t = new Date().getTime() - t;
    
    dt += t;
}

$('#first').text(dt + ' | ' + dt/n);

//--------------------------------------------------------

dt = 0;

for (var i=0; i<n; i++){

    var t = new Date().getTime();
    
    var $element = $('div').find('p');
      
    t = new Date().getTime() - t;
    
    dt += t;
}

$('#second').text(dt + ' | ' + dt/n);

//--------------------------------------------------------

dt = 0;

for (var i=0; i<n; i++){

    var t = new Date().getTime();
    
    var $element = $('#div p');
      
    t = new Date().getTime() - t;
    
    dt += t;
}

$('#third').text(dt + ' | ' + dt/n);

//--------------------------------------------------------

dt = 0;

for (var i=0; i<n; i++){

    var t = new Date().getTime();
    
    var $element = $('div #p');
      
    t = new Date().getTime() - t;
    
    dt += t;
}

$('#fourth').text(dt + ' | ' + dt/n);

//--------------------------------------------------------

dt = 0;

for (var i=0; i<n; i++){

    var t = new Date().getTime();
    
    var $element = $('#div #p');
      
    t = new Date().getTime() - t;
    
    dt += t;
}

$('#fifth').text(dt + ' | ' + dt/n);