JSFiddle - React, Tailwind, and code Playground

by Alexander Shutov

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/animation.js"></script>
<div id="target"></div>

React

const React = {
  // Fix for JSX pragma in JSFiddle
  createElement: Malevic.html,
};

const {
  animate,
} = Malevic.Animation;
Malevic.Animation();

const state = {
  direction: 'left',
};

function setState(newState) {
  Object.assign(state, newState);
  render(document.body, App(state));
}

function App(props) {
  return ( <
    div class = "app" >
    <
    div class = "app__buttons" >
    <
    button onclick = {
      () => setState({
        direction: 'left'
      })
    } >
    Left <
    /button> <
    button onclick = {
      () => setState({
        direction: 'right'
      })
    } >
    Right <
    /button> < /
    div > <
    /div>
  );
}