JSFiddle - React, Tailwind, and code Playground

by msfrisbie

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.5.0/polymer.min.js"></script>
<!-- Define element -->
<polymer-element name="my-spinner" attributes="degrees">
    <template>
        <style>
            div#spinner {
                margin: 20px;
                width: 50px;
                height: 50px;
                background: orange;
                transition:all 0.25s ease-in-out;
            }
        </style>
        <div id="label">
            <content></content>
        </div>
        Value: <span>{{degrees}}</span><br>
        <button on-tap="{{increase}}">Increase</button>
        <div id="spinner"></div>
    </template>
    <script>
    Polymer({
        degrees: 0, // default
        degreesChanged: function() {    
            this.$.spinner.style.webkitTransform = "rotateZ("+this.degrees+"deg)";
        },
        increase: function() {
            this.degrees += 45;
        }
    });
    </script>
</polymer-element>

<!-- Use element -->
<my-spinner degrees="45">Degrees</my-spinner>