JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<p>
This is my super heading!
</p>

CSS

.wf-active *, 
.wf-inactive * {
    -webkit-transition: opacity 1s ease-out;  
    -moz-transition: opacity 1s ease-out; 
    -o-transition: opacity 1s ease-out;  
    transition: opacity 1s ease-out;  
}

.wf-loading * { opacity: 0; }
.wf-active * { opacity: 1; }

body {
 font-family: 'Indie Flower', cursive;
 font-weight: 400;
}

JavaScript

WebFontConfig = {
    google: { families: [ 'Indie+Flower::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'false';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();