JSFiddle - React, Tailwind, and code Playground

by Sergey Kulikov

HTML

<base href="https://polygit.org/polymer+polymer+v1.8.0/paper-styles+PolymerElements+v1.2.1/components/"/>

<script>
  window.Polymer = {
    dom: 'shadow'
  };
</script>

<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-styles/typography.html">

<my-app></my-app>

<dom-module id="my-app">
  <template>
    <style>
      :host {
        display: block;
      }
          
      .bug {
        background: white;        
        padding: 10px;
        @apply(--paper-transition-easing); /* OOPS! empty mixin causing xtra semicolon in Safari */
      }
    </style>
    <div class="wrap">
      <div class="bug">Padding should be 10px!</div>
    </div>
    
  </template>
  <script>
    addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'my-app'
      });
    });
  </script>
</dom-module>