JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first"></div>
<div id="thing-1"></div>
<div id="thing-2"></div>
<div id="thing-3"></div>
<div id="thing-4"></div>

JavaScript

console.time("first");
  var thing = document.getElementById("first");
  thing.setAttribute("style", "width: 100px; height: 100px; background-color: block;");
console.timeEnd("first");

console.time("blue");
  var thing = document.getElementById("thing-4");
  thing.style.width = "100px";
  thing.style.height = "100px";
  thing.style.backgroundColor = "blue";
console.timeEnd("blue");

console.time("green");
  var thing3 = document.getElementById("thing-3");
  thing3.style.cssText = "width: 100px; height: 100px; background-color: green;";
console.timeEnd("green");



console.time("yellow");
  var thing2 = document.getElementById("thing-2");
  thing2.setAttribute("style", "width: 100px; height: 100px; background-color: yellow;");
console.timeEnd("yellow");

console.time("red");
  var thing1 = document.getElementById("thing-1");
  thing1.setAttribute("style", "width: 100px; height: 100px; background-color: red;");
console.timeEnd("red");




console.log('---------');