JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://polymer-project.org/polymer/polymer.min.js"></script>
<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="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>
        </ul>

    </template>
    <script>
        Polymer.register(this, {
          applyAuthorStyles : true
        })
    </script>
</element>
<element name="x-wrap">
    <template>
        <ul>
            <li id="one"></li>
            <li id="two"></li>
        </ul>
    </template>    
    <script>
        Polymer.register(this, {       
            ready: function(){
                this.$.one.innerHTML = '<x-quote price="£100"></x-quote>';
                this.$.two.innerHTML = '<x-quote price="Not Available"></x-quote>';
            }
        })
    </script>
</element>

<x-wrap></x-wrap>

JavaScript

onload = function(){

}