JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<link rel="stylesheet" href="http://foundation.zurb.com/docs/assets/docs.css">
<script src="http://www.polymer-project.org/polymer/polymer.min.js"></script>

<polymer-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>
    
</polymer-element>

<polymer-element name="x-wrap">
    <template>
        <ul id="here">
            
        </ul>
    </template>    
</polymer-element>
<x-wrap>
</x-wrap>

JavaScript

Polymer('x-wrap', {       
            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 = '<x-quote image="" price="Not Available" monthly="Not Available" title="baz" id="baz"></x-quote>';
                this.$.here.appendChild(li2);
        
        // uncomment this to switch if rendered
         //this.$.here.appendChild(li);
            }
        })

        Polymer('x-quote', {
            onSelect: function(inType, inDetail, inToNode){

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

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

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

            }
        })