JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<div id="main"></div>
<div id="second"></div>

CSS

.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}

JavaScript

f('#main')
	.html('Текст')
  .addClass('yellow')
  .html('Другой текст')
  .width(100)
 	.height(50);
  
f('#second')
	.html('Текст')
  .addClass('green')
  .width(200)
  .height(50);
  

function f(selector) {
  this.elem = document.querySelector(selector);
  this.html = function(html) {
  	this.elem.innerHTML = html;
    return this;
  }
  this.addClass = function(className) {
  	this.elem.setAttribute('class', className);
    return this;
  } 
  this.width = function(width) {
  	this.elem.style.width = width + 'px';
    return this;
  }
  this.height = function(height) {
  	this.elem.style.height = height + 'px';
    return this; //чтобы могли в цепочку все составлять, вверху через точку
  }
  return this;
}