JSFiddle - React, Tailwind, and code Playground

by igos

HTML

<div id="container">
   <div id="particle-frame" style="width: 500px; height: 500px"></div>
    <div id="infoi">Left:<input id="signup-time" type="text" value="" /></div>
</div>

CSS

#particle-frame {
  position: relative;
  display: block;
  background: #ffffff;
  overflow: hidden;
  border-radius: 5px;
}

particle-1, particle-2 {
  display: block; position: absolute;
}

/*  Color  Variations */
particle-1 { background-color: #206876; }
particle-2 { background-color: #015666; }


#container {
    width: 100%;
    height: 100%;
    position: relative;
    text-align:center;
}

#particle-frame, 
#infoi {
    position: absolute;

}

#infoi {
    z-index: 10;
    width:300px;
    height:300px;
	margin:100px auto;
    background-image:url('http://7dea.com/resource/img/logo.png');
}

body {
  text-align:center;
}

JavaScript

$("body").delegate("particle-2", "click", function(){
    $(this).hide();
    $("#signup-time").val('1111');
});
$("body").delegate("particle-1", "click", function(){
    $(this).hide();
    $("#signup-time").val('1111');
});

// init vars
  var particles = new Array();
  var frame = document.getElementById('particle-frame');
  var canvas_width = parseInt(frame.style.width);
  var canvas_height = parseInt(frame.style.height);

  // settings
  var frame_rate = 31; // per second
  var max_particle_size = 50; // pixels
  var max_velocity = 2; // pixels per frame
  createParticles(30);
  var runtime = 0; // seconds, 0 for infinite
  var time_elapsed = 0;

  // timer
  var timer = setInterval(function() {
    animateParticles();

    if (runtime != 0) { 
      time_elapsed += 1 / frame_rate;
      if (time_elapsed >= runtime) clearInterval(timer);
    }

  }, 1000 / frame_rate);

  // functions
  function createParticles(amount) {
    for (var i = 1; i <= amount; i++) {
      particles[i] = {'dom': document.createElement("particle-" + getRandomInt(1,2)),
                      'opacity' : getRandomInt(50,100)/100,
                      'size' : getRandomInt(1, max_particle_size),
                      'left' : canvas_width * Math.floor(Math.random() * 101) / 100,
                       'top' : canvas_height * Math.floor(Math.random() * 101) / 100, 
                      'x-velocity' : getRandomInt(-max_velocity*100, max_velocity*100) / 100, 
                      'y-velocity' : getRandomInt(-max_velocity*100, max_velocity*100) / 100 }

      particles[i]['dom'].style.cssText = "opacity: " + particles[i]['opacity'] + "; border-radius: " + particles[i]['size']/2 + "px; height:" + particles[i]['size'] + "px; width: " +particles[i]['size'] + "px; left:" + particles[i]['left'] + "px; top:" + particles[i]['top'] + "px;";
      particles[i]['dom'].setAttribute("x-velocity",particles[i]['x-velocity']);
     ...