JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<link rel="stylesheet" href="http://foundation.zurb.com/docs/assets/docs.css">
<element name="x-quote" attributes="image price monthly title id">
    <template id="x-template-x-quote">
        <style>
            ul{
                width:240px;
            }
            .pointer{
                cursor: pointer;
            }
        </style>

        <ul  class="pricing-table">
            <li class="title">{{title}}</li>

            <li class="price">{{price}}</li>
            <li class="bullet-item">Monthly: {{monthly}}</li>

            <li class="cta-button">
                    <template bind if="{{price != 'Not Available'}}"><a class="radius button" data-id="{{id}}" on-click="onSelect"><span>Select</span></a></template>
                    <template bind if="{{price == 'Not Available'}}"><a class="radius button"><span>Not Available</span></a></template>
            </li>

            <li class="bullet-item"><a class="pointer link"   on-click="onCompare">Compare</a></li>
        </ul>

    </template>
    <script>
        if(this !== window) Polymer.register(this, {
            onSelect: function(inType, inDetail, inToNode){

                this.fire('select', {
                  id : inToNode.dataset.id
                });

            },
            onCompare:function(event){
                this.fire('compare', {})

            },
            applyAuthorStyles : true,
            ready: function(){

            }
        })
    </script>
</element>
<element name="x-wrap">
    <template>
        <ul id="here">
            
        </ul>
    </template>    
    <script>
        if(this !== window) Polymer.register(this, {       
            ready: function(){
                var li = document.createElement('li')
                li.innerHTML = '<x-quote image="" price="£100" monthly="£10" title="foo" id="foo"></x-quote>';
                this.$.here.appendChild(li);
                var li2 = document.createElement('li')
                li2.innerHTML =...

JavaScript

// Copyright (c) 2012 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
//    * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
//    * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
//    * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
function PointerGestureEvent(a,b){var c=b||{},d=document.createEvent("Event"),e={bubbles:!0,cancelable:!0};return Object.keys(e).forEach(function(a){a in c&&(e[a]=c[a])}),d.initEvent(a,e.bubbles,e.cancelable),Object.keys(c).forEach(function(a){d[a]=b[a]}),d.preventTap=this.preventTap,d}if(window.Platform=window.Platform||{},window.logFlags=window.logFlags||{},function(a){var...