JSFiddle - React, Tailwind, and code Playground

ECMAScript 6 Class/Constructor/Etc.

by MegaScience

HTML

<button id="butt">Appear</button>

CSS

div.myClassName {
  width: 100%;
  height: 200px;
  background-color: red;
}

JavaScript

// https://shellmonger.com/2015/03/23/event-handlers-in-ecmascript-6-2/
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
// http://2ality.com/2013/06/auto-binding.html
class MyClass {
    constructor(activator) {
        this.el = document.createElement("div")
        this.el.className = "myClassName"
        this.el.style.display = "none"
        activator.addEventListener("click", e => this.onClick(e))
    }
 
    onClick(evt) {
        console.info("In onClick: this = %o", this)
        this.el.style.display = ""
    }
}

document.body.appendChild(new MyClass(document.getElementById("butt")).el)