JSFiddle - React, Tailwind, and code Playground

by ignaciocorreia

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

    <div id="particle-slider">
        <div class="slides">
        <div id="first-slide" class="slide" data-src="img/logo.png">
      	</div>
    	</div>
  		<canvas class="draw"></canvas>
    </div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #FFF;

  .slides {
    display: none;
  }
}

JavaScript

// forked from Shelby.Purcell's "forked: Interactive Particle Logo" http://jsdo.it/Shelby.Purcell/yDwP
// forked from petyanghao's "forked: Interactive Particle Logo" http://jsdo.it/petyanghao/3NYT
// forked from adria.marti.blasco's "forked: Interactive Particle Logo" http://jsdo.it/adria.marti.blasco/ssxu
// forked from macintosh.ppop's "forked: Interactive Particle Logo" http://jsdo.it/macintosh.ppop/y7uz
// forked from TaminoMartinius's "Interactive Particle Logo" http://jsdo.it/TaminoMartinius/Interactive-Particle-Logo
// Tamino Martinius - All rights reserved

// Copyright © 2013 Tamino Martinius (http://zaku.eu)
// Copyright © 2013 Particleslider.com (http://particleslider.com

// Terms of usage: http://particleslider.com/legal/license

var init = function(){
  var isMobile = navigator.userAgent &&
    navigator.userAgent.toLowerCase().indexOf('mobile') >= 0;
  
  var ps = new ParticleSlider({
    ptlGap: isMobile ? 3 : 0,
    ptlSize: isMobile ? 3 : 1,
    width: 1e9,
    height: 1e9
  });
    
  var gui = new dat.GUI();
  gui.add(ps, 'ptlGap').min(0).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'ptlSize').min(1).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'restless');
  gui.addColor(ps, 'color').onChange(function(value){
    ps.monochrome = true;
    ps.setColor(value);
	  ps.init(true);
  });
  gui.close();
  
  (window.addEventListener
   ? window.addEventListener('click', function(){ps.init(true)}, false)
   : window.onclick = function(){ps.init(true)});
}

var initParticleSlider = function(){
  var psScript = document.createElement('script');
  (psScript.addEventListener
    ? psScript.addEventListener('load', init, false)
    : psScript.onload = init);
  psScript.src = 'http://particleslider.com/js/particleslider/current/particleslider.js';
	psScript.setAttribute('type', 'text/javascript');
  document.body.appendChild(psScript);
}
    
(window.addEventListener ?...