JSFiddle - React, Tailwind, and code Playground

by skane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>

CSS

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}

JavaScript

const { 
	p, div, ul, li,
  svg, image, text, circle, g
} = React.DOM

const App = (props) => div({
	children: [ 
    UI(props),
  	Stage(props)
  ]
})

const UI = ({ t }) => div({
	style: {
 		position: 'fixed',
    zIndex: 2
  },
  children: `Time: ${ t }`
})

const Stage = ({ t }) => svg({ 
	viewBox: '-200 -200 400 400',
  width: '100%',
  height: '100%',
  children: [
  	g({
      transform: `translate(${ 100 * Math.sin( t / 50 ) }, ${ 0 })`,
      children: [
        text({ 
          textAnchor: 'middle',
          dominantBaseline: 'central',
          stroke: 'black',
          strokeWidth: 1,
          fontSize: 32,
          fill: 'none',
          children: 'hello world'
        }),
        circle({
        	style: {
         		transform: `rotateY(${ 360 * (Math.sin( t / 30 ) + 1) }deg)`
          },
          r: 50,
          stroke: 'blue', 
          strokeWidth: 3,
          fill: 'none'
        }),
        image({
        	style: {
         		width: 200,
            height: 50,
            transform: `translate(-50%, ${ 100 + 10 * Math.sin( t / 30 ) }%)`
          },
          href: 'https://placehold.it/200x50'
        })
      ]
    })
  ]
})

function makeTick () {
	let s = { t: 0 }
  return function tick () {
  	s = Object.assign({}, { t: s.t + 1 })
		ReactDOM.render(App(s), document.body)
    requestAnimationFrame(tick)
  }
}

requestAnimationFrame(makeTick())