JSFiddle - React, Tailwind, and code Playground

by Sergey Kulikov

HTML

<base href="https://polygit.org/polymer+polymer+v1.9.1/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 {
        @apply(--paper-font-subhead);
        @apply(--paper-transition-easing); /* OOPS! empty mixin causing extra semicolon in Safari */
      }
    </style>
    
    <div class="bug">Line height should be 24px! See dev tools in Safari 9.</div>    
    
  </template>
  <script>
    addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'my-app'
      });
    });
  </script>
</dom-module>