JSFiddle - React, Tailwind, and code Playground

HTML

<style id="style"></style>
<div id="container"></div>
<div id="DOMtestObj"></div>

JavaScript

console.clear();

function appendElements(name, number, width, height){
    var container = document.getElementById('container');
    container.innerHTML = '';
    console.time('init ' + name);
    var input = '';
    var elem = '<div class="elem"></div>';
    for(i = 0; i < number; i++){
        input += elem;
    }
    console.time('init1 ' + name);
    container.innerHTML = input;
    console.timeEnd('init1 ' + name);
    document.getElementById('style').innerHTML = ".elem{width:"+width+"px;height:"+height+"px;}";
    console.log(container.clientHeight);
    console.timeEnd('init ' + name);
    DOMspeedtest(name);
    regSpeedtest(name);
}

function DOMspeedtest(name){
    console.time('DOM  ' + name);
    for(i = 0; i < 8000; i++){
        document.getElementById('DOMtestObj').innerHTML = i;
    }
    console.timeEnd('DOM  ' + name);
}

function regSpeedtest(name){
    console.time('mem  ' + name);
    for(i = 0; i < 10000000; i++){
        var q = i * i;
    }
    console.timeEnd('mem  ' + name);
var container = document.getElementById('container');
    console.log(container.clientHeight);
}
appendElements('reg10',10,0,0);
appendElements('reg350',350,0,0);
appendElements('reg100000',100000,0,0);
appendElements('huge10',10,100000,100000);
appendElements('huge350',335,100000,100000);
appendElements('huge100000',100000,100000,100000);