JSFiddle - React, Tailwind, and code Playground

by gisheri

HTML

<div id="viewport"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src='http://requirejs.org/docs/release/2.1.15/minified/require.js'></script>

CSS

html, body {
  height: 100%;
  margin: 0;
}

#viewport {
  position: relative;
  height: 100%;
  background: #1d1f20;
}

JavaScript

require.config({
  baseUrl: 'http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/',
  packages: [
    {
      name: 'physicsjs',
      location: 'physicsjs-current',
      main: 'physicsjs-full'
    }
  ]
});

require(['physicsjs','pixi'], function( Physics, PIXI ){

  Physics(function (world) {


      Game = {


        hero: null,
        galaxies: [],

        init: function(){
          Game.Physics = Physics;
          Game.world = world;
          Game.renderer = Game.Physics.renderer('canvas', {el: 'viewport'});
          Game.viewportBounds = Physics.aabb(-200, -200, window.innerWidth+400, window.innerHeight+400);
          Game.world.add(Game.renderer);
          Game.world.on('step', function () {
              Game.world.render();
          });

          //create Hero
          Game.hero = Galaxy.init({color:'#ffffff'});
          

          //create galaxies
          for(var i = 0; i<5; i++){
            Galaxy.init();
          }

          this.listeners();
        },
        listeners: function(){

          var attractor = Physics.behavior('attractor', {
              order: 0,
              strength: .002,
          });
          Game.world.on({

              'interact:poke': function( pos ){
                  Game.world.wakeUpAll();
                  attractor.position( pos );
                  attractor.applyTo(Game.hero.element);
                  Game.world.add( attractor );
              },
              'interact:move': function( pos ){
                  attractor.position( pos );
                  attractor.applyTo([Game.hero.element]);
              },
              'interact:release': function(){
                  Game.world.wakeUpAll();
                  Game.world.remove( attractor );
              },
          });

          // add things to the world
          Game.world.add([
              Game.Physics.behavior('interactive', { el: Game.renderer.container }),
              //Game.Physics.behavior('newtonian', { order:2,...