JSFiddle - React, Tailwind, and code Playground

by codeforcoffee

HTML

<div>

</div>

CSS

div {
  color: purple;
  font-weight: bold;
}

Babel + JSX

'use strict'

class Apprentice {
	constructor(properties,div){
  	this.props = properties;
    this.el = document.getElementsByTagName(div)[0];
  }
  toObject(){
  	return this.props;
  }
	render(){
  	for(var prop in this.props){
    	this.el.innerHTML = this.el.innerHTML + ' ' + this.props[prop];
    }
  }
}

var obiWan = new Apprentice({color: 'blue', master: 'Qui-Gon', hair: 'bad'},'div');
console.log(obiWan.toObject());
obiWan.render();

class Master extends Apprentice {
	toObject() {
  	return 'I am not weak-minded. You will not know anything about me.';
  }
}

var quiGon = new Master({ color: 'green', hair: '...', beard: 'magnificent'}, 'div');
console.log(quiGon.toObject());
console.log(quiGon.props);