JSFiddle - React, Tailwind, and code Playground

by notadam

HTML

<script src="https://rawgit.com/j2css/j2c/master/dist/j2c.global.min.js"></script>

JavaScript

var base = [{
    '.overlay': {
      background: 'red',
    },
  },

  animations(),
]

function animations() {
  return {
    '.overlay': {
      _webkit$_moz$: {
        transition: 'all 0.3s',
      },
    },

    '.animation-8': {
      _webkit$_moz$: {
        perspective: '1300px',
      },
    },

    '.animation-8 .dialog': {
      _webkit$_moz$: {
        tranform_style: 'preserve-3d',
        transition: 'all 0.3s',
      },

      _webkit$_moz$_ms$: {
        transform: 'rotateY(-70deg)',
      },

      opacity: 0,
    },

    '.visible.animation-8 .dialog': {
      _webkit$_moz$_ms$: {
        transform: 'rotateY(0deg)',
      },

      opacity: 1,
    },
  }
}

var sheet = j2c.sheet(base)

document.body.innerHTML += '<pre>' + sheet + '</pre>'