JSFiddle - React, Tailwind, and code Playground

by hutber

HTML

<div class="content"><!--.noClick--><div class="intro"><div class="cogFade"><div class="cogElements" style="margin-top: 194px;"><div class="circle zoomout" style="margin-top: 194px;"></div><div style="font-size: 5rem;" class="cog large"><i class="icon-cog spinning"></i></div></div></div><div style="font-size: 15rem; display: none;" class="b breathing"><i class="icon-dotb"></i></div></div></div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="./js/app.js"></script>
    

<div></div>

CSS

.icon-dotb:before {
  content: '\e800'; }

/* '?' */
.icon-cog:before {
  content: '\e801'; }

/* '?' */
.icon-untitled-6:before {
  content: '\e802'; }

/* '?' */
.icon-lamp:before {
  content: '\e803'; }

/* '?' */
.icon-volume:before {
  content: '\e804'; }

/* '?' */
.icon-bell:before {
  content: '\e805'; }

/* '?' */
.icon-play-circled:before {
  content: '\e806'; }

/* '?' */
.icon-piano:before {
  content: '\e807'; }

/* '?' */
.icon-gong:before {
  content: '\e808'; }

/* '?' */
.icon-sound:before {
  content: '\e809'; }

/* '?' */
.icon-stop:before {
  content: '\e80a'; }

/* '?' */
.icon-play:before {
  content: '\e80b'; }

/* '?' */
.icon-stop-circled:before {
  content: '\e80c'; }

/* '?' */
.icon-pause:before {
  content: '\e80d'; }

/* '?' */
.icon-pause-circled:before {
  content: '\e80e'; }

/* '?' */
.icon-keys:before {
  content: '\e80f'; }

/* '?' */
.icon-bowl:before {
  content: '\e810'; }

/* '?' */
.icon-lightbulb:before {
  content: '\e811'; }


@-webkit-keyframes spinning {
  100% {
    transform: rotate(360deg); } }

@-moz-keyframes spinning {
  100% {
    transform: rotate(360deg); } }

@-ms-keyframes spinning {
  100% {
    transform: rotate(360deg); } }

@-o-keyframes spinning {
  100% {
    transform: rotate(360deg); } }

@keyframes spinning {
  100% {
    transform: rotate(360deg); } }

@-webkit-keyframes start {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    -moz-transform: scale3d(0.3, 0.3, 0.3);
    -ms-transform: scale3d(0.3, 0.3, 0.3);
    -o-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

@-moz-keyframes start {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    -moz-transform: scale3d(0.3, 0.3, 0.3);
    -ms-transform: scale3d(0.3, 0.3, 0.3);
    -o-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

@-ms-keyframes start {
  0% {
    opacity: 0;
    -webkit-transform:...