JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="http://kentaromiura.github.io/custom-element/custom-element.js"></script>
<script src="https://rawgit.com/bosonic/bosonic/master/dist/bosonic-polyfills.js"></script>
<custom-element name="kenta-foo">
    <template>
        this is a declarative custom element that flawlessy works with x-tag or with the polymer customElement polyfill (used by Polymer and Bosonic),
        click to see a message.
    </template>
    <style>
    kenta-foo{
        display:block;
        color:lightsteelblue;
        border: 1px solid steelblue;
        background-color:whitesmoke;
        padding:1em;
        text-transform:capitalize;
    }
    </style>
    <script>
        document.register.tag('kenta-foo',{
            ready: function(){
                this.onclick = this.method
            },
            method: function (){
                alert('just to prove that it works')
            }
        })
    </script>
</custom-element>

<kenta-foo></kenta-foo>
<br />
More info on: <a href="https://github.com/kentaromiura/custom-element">the github repository</a>