JSFiddle - React, Tailwind, and code Playground

by Tomek

HTML

<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html" />
<template is="dom-bind" id="root">
    <fieldset>
        <legend>This works</legend>
        <i>{{model.value}}</i>
        <button onclick="++this.value" value="{{model.value::click}}">++</button>
    </fieldset>
    <fieldset>
        <legend>Clicking on red span does not</legend>
        <i>{{model.value}}</i>
        <button onclick="++this.value" value="{{model.value::click}}">
            <span>++</span>
        </button>
    </fieldset>
    <p>
        <button type="button" on-click="dumpModel">Dump model</button>
    </p>
</template>

CSS

button span{
  background-color: red;
}

JavaScript

(function (template) {
    template.model = {
        value: 0
    };
    
    template.dumpModel = function () {
        console.log(template.model);
    };
})(document.querySelector("#root"));