JSFiddle - React, Tailwind, and code Playground

CSS

section {
    border-width: thin 0;
    border-style: dashed;
    border-color: #222;
    margin: 1em;
    padding: 1em;
}

code {
    background: white;
    padding: 1em;
    display: block;
}

p {
    font: 120% sans-serif;
    margin: 0;
}

JavaScript

document.body.innerHTML = [function() {
	arguments.callee.title = "$(\".class1\").removeClass(\"class2\");";
    $(".class1").removeClass("class2");
}, function() {
	arguments.callee.title = "$(\".class1\").each(function(){\n\t$(this).removeClass(\"class2\");\n});";
	$('.class1').each(function(){
		$(this).removeClass("class2");
	});
}, function() {
	arguments.callee.title = "$(\".class1.class2\").removeClass(\"class2\");;";
	$('.class1.class2').removeClass("class2");
}, function() {
	arguments.callee.title = "for(let element of document.querySelectorAll(\".class1\"))\n\telement.classList.remove(\"class1\");";
	for(let element of document.querySelectorAll(".class1"))
    	element.classList.remove("class1");
}].map(function(test) {
	createElements();
    
	var startTime = new Date();
    test();
    var endTime = new Date();
    var duration = endTime - startTime;
    
    return "<section><pre><code>" + test.title + "</code></pre><p>Заняло " + duration + " мс</p><p><meter value=\"" + duration + "\" min=\"0\" max=\"750\"></p></section>"
}).join("");

function createElements() {
	document.body.innerHTML = new Array(20000).join("<span class=\"class1 class2\"></span>");
}