JSFiddle - React, Tailwind, and code Playground

by agquick

HTML

<script src="https://unpkg.com/weightless/umd/weightless.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/5.15.4/mobx.umd.js"></script>
<script src="https://unpkg.com/elemx@0.2.2/dist/elemx.umd.js"></script>
<counter-element></counter-element>

CSS

body {
  font-family: 'Avenir';
  -webkit-font-smoothing: antialiased;
  --font-family-serif: 'Avenir';
}

Babel + JSX

var observable = mobx.observable;

class CounterElement extends elemx.ReactiveElement {
  @observable count = 0;
  
  inc() {
  	this.count++;
  }
  
  dec() {
  	this.count--;
  }
  
  templateHTML() {
    return `
			<button @click="this.dec()">-</button>
      <span @text="this.count"></span>
      <button @click="this.inc()">+</button>
    `;
  }
  templateCSS() {
  	return `
    	* {
      	font-size: 200%;
       }
      span {
      	width: 4rem;
        display: inline-block;
        text-align: center;
      }
      button {
        width: 64px;
        height: 64px;
        border: none;
        border-radius: 10px;
        background-color: seagreen;
        color: white;
      }
    `;
  }
}
customElements.define('counter-element', CounterElement);