JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="covidContainer"> 
<div class="covidVertGrad"></div>
<div class="covidHorizGrad"></div>
<div class="covidImage"></div>
<div class="covidVertGradOverlay"></div>
 <div class="covidFloaters"> 
  <div class="debris floaterLarge floaterX"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge floaterX"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge floaterX"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge floaterX"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge floaterX"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge floaterX"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge floaterX"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge floaterX"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge floaterX"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge floaterX"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge"></div><div class="debris floaterLarge floaterX"></div>

  <div class="debris floaterMedium floaterX"></div><div class="debris floaterMedium"></div><div class="debris floaterMedium"></div><div class="debris floaterMedium floaterX"></div><div class="debris floaterMedium"></div><div class="debris floaterMedium"></div><div class="debris floaterMedium floaterX"></div><div class="debris floaterMedium"></div><div class="debris floaterMedium"></div><div class="debris floaterMedium floaterX"></div><div class="debris floaterMedium"></div><div...

CSS

/* ------------------------------------ fix sn */

.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-2,
.container-fluid .col-sm-2,
.container-fluid .col-md-2,
.container-fluid .col-lg-2,
.container-fluid .col-xs-3,
.container-fluid .col-sm-3,
.container-fluid .col-md-3,
.container-fluid .col-lg-3,
.container-fluid .col-xs-4,
.container-fluid .col-sm-4,
.container-fluid .col-md-4,
.container-fluid .col-lg-4,
.container-fluid .col-xs-5,
.container-fluid .col-sm-5,
.container-fluid .col-md-5,
.container-fluid .col-lg-5,
.container-fluid .col-xs-6,
.container-fluid .col-sm-6,
.container-fluid .col-md-6,
.container-fluid .col-lg-6,
.container-fluid .col-xs-7,
.container-fluid .col-sm-7,
.container-fluid .col-md-7,
.container-fluid .col-lg-7,
.container-fluid .col-xs-8,
.container-fluid .col-sm-8,
.container-fluid .col-md-8,
.container-fluid .col-lg-8,
.container-fluid .col-xs-9,
.container-fluid .col-sm-9,
.container-fluid .col-md-9,
.container-fluid .col-lg-9,
.container-fluid .col-xs-10,
.container-fluid .col-sm-10,
.container-fluid .col-md-10,
.container-fluid .col-lg-10,
.container-fluid .col-xs-11,
.container-fluid .col-sm-11,
.container-fluid .col-md-11,
.container-fluid .col-lg-11,
.container-fluid .col-xs-12,
.container-fluid .col-sm-12,
.container-fluid .col-md-12,
.container-fluid .col-lg-12 {
    padding-left: 0;
    padding-right: 0;
}


a {cursor: pointer; color: #3775D8;}
a:active {opacity: .8;}

a.lightgreyText.hoverUnderline:hover {
    text-decoration: underline !important;
    text-decoration-color: white !important;
}

.cursorPointer {
	cursor: pointer;
}
/* ----------------------------------- page spacing */
.break5 {display: block; height: 5px; flex-basis: 100%;}
.break10 {display: block; height: 10px; flex-basis: 100%;}
.break15 {display: block;...

JavaScript

$("#nameOfTraining").html("CPI Lead Information");
$("#trainingButtonGo").click(function() {
})
  	  $('.persona1').hide();
      $('.persona2').show();
      $('.persona3').hide();
$(".trainDisplayed").click(function(){
  $(".trainChanger").addClass("trainChangerOpen");
});
$(".trainingSelected").click(function(){
  $(".trainChanger").removeClass("trainChangerOpen");
});

$(".trainDisplayed").click(function() {
  $("#nameOfTraining").html("CPI Lead Information");
  $("#trainingButtonGo").click(function() {
  })
});
$("#selectPersona1").click(function() {
  $("#nameOfTraining").html("CPI Lead Information");
  $("#trainingButtonGo").click(function() {
  	  $('.persona1').show();
      $('.persona2').hide();
      $('.persona3').hide();
  })
});
$("#selectPersona2").click(function() {
  $("#nameOfTraining").html("General CPI Information");
  $("#trainingButtonGo").click(function() {
  	  $('.persona1').hide();
      $('.persona2').show();
      $('.persona3').hide();
  })
});
$("#selectPersona3").click(function() {
  $("#nameOfTraining").html("Executive Information");
  $("#trainingButtonGo").click(function() {
  	  $('.persona1').hide();
      $('.persona2').hide();
      $('.persona3').show();
  })
});


// collect all the divs
var divs = document.getElementsByClassName('debris');
// get window width and height
var winWidth = window.innerWidth;
var winHeight = 800;

// i stands for "index". you could also call this banana or haircut. it's a variable
for ( var i=0; i < divs.length; i++ ) {
 	
    // shortcut! the current div in the list
    var thisDiv = divs[i];
    
    // get random numbers for each element
    randomTop = getRandomNumber(0, winHeight);
    randomLeft = getRandomNumber(0, winWidth);
    
    // update top and left position
    thisDiv.style.top = randomTop +"px";
    thisDiv.style.left = randomLeft +"px";
    
}

// function that returns a random number between a min and max
function getRandomNumber(min, max) {
    
  return Math.random() *...