JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/redom/3.1.1/redom.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet">

CSS

* {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
}

html {
  font-size: 10pt;
  line-height: 1.4;
  font-weight: 400;
  font-family: 'Source Sans Pro', sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  color: #fff;
  margin: 0;
  background: #303030;
  padding: 0.8rem 2.5rem;
}

h1 {
  font-weight: 300;
}

input {
  padding: 0.8rem;
}

JavaScript

const {
  el,
  text,
  mount
} = redom;

class App {
  constructor() {
    this.el = el('.app',
      this.hello = new Hello(),
      this.input = el('input', {
        autofocus: true,
        placeholder: 'Type here homie',
        oninput: e => this.hello.update(this.input.value)
      })
    );
  }
}

class Hello {
  constructor() {
    this.el = el('h1', 'Hello ', this.subject = text('world'), '!');
  }
  update(subject) {
    this.subject.textContent = subject || 'world';
  }
}

const app = new App();

mount(document.body, app);