JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="http://polymer-project.org/polymer/polymer.min.js"></script>
<element name="x-placeholder" attributes="width height text">
    <template id="x-template-x-placeholder">
       <style>
        @host {
          x-placeholder {
            color: white;
            font-family: Tahoma;
            background-color:black;
            display: inline-block;
            width: {{width}}px;
            height: {{height}}px;
            line-height:{{height}}px;
          }          
        }
        .center {           
           text-align:center;
           width:100%;           
          }
        </style>
        <div class="center">{{text}}</div>
    </template>
    <script>
        Polymer.register(this, {
            ready: function(){               
                console.log('fooz')
            }
        })
    </script>
</element>

<x-placeholder text="This is a placeholder" width="200" height="400"></x-placeholder>