JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="bannerContainer">

<div class="nudgeControl nudgeControla1"></div>
<div class="nudgeControl nudgeControlc1"></div>
<div class="nudgeControl nudgeControle1"></div>
<div class="nudgeControl nudgeControlg1"></div>
<div class="nudgeControl nudgeControli1"></div>
<div class="nudgeControl nudgeControlk1"></div>
<div class="nudgeControl nudgeControlm1"></div>
<div class="nudgeControl nudgeControlo1"></div>
<div class="nudgeControl nudgeControlq1"></div>
<div class="nudgeControl nudgeControls1"></div>
<div class="nudgeControl nudgeControlu1"></div>
<div class="nudgeControl nudgeControlw1"></div>
<div class="nudgeControl nudgeControla0bottom"></div>
<div class="nudgeControl nudgeControla1bottom"></div>
<div class="nudgeControl nudgeControlc1bottom"></div>
<div class="nudgeControl nudgeControle1bottom"></div>
<div class="nudgeControl nudgeControlg1bottom"></div>
<div class="nudgeControl nudgeControli1bottom"></div>
<div class="nudgeControl nudgeControlk1bottom"></div>
<div class="nudgeControl nudgeControlm1bottom"></div>
<div class="nudgeControl nudgeControlo1bottom"></div>
<div class="nudgeControl nudgeControlq1bottom"></div>

  <div class="nudgeControl purpleback nudgeControlb2"></div>
  <div class="nudgeControl purpleback nudgeControlb2bottom"></div>
  <div class="nudgeControl purpleback nudgeControlb4"></div>
  <div class="nudgeControl purpleback nudgeControlb4bottom"></div>
  <div class="nudgeControl purpleback nudgeControlb6"></div>
  <div class="nudgeControl purpleback nudgeControlb6bottom"></div>
  <div class="nudgeControl purpleback nudgeControlb8"></div>
  <div class="nudgeControl purpleback nudgeControlb8bottom"></div>
  <div class="nudgeControl purpleback nudgeControlb10"></div>
  <div class="nudgeControl purpleback nudgeControlb10bottom"></div>
  <div class="nudgeControl purpleback nudgeControlb12"></div>
  <div class="nudgeControl purpleback nudgeControlb12bottom"></div>
  <div class="nudgeControl purpleback nudgeControlb14"></div>
  <div...

CSS

.bannerContainer {
  height: 270px;
  width: calc(100% - 2px);
  position: relative;
  overflow: hidden;
}

.circles {
    margin-top: -110px;
    margin-left: -360px;
}

.circle {
  height: 82px;
  width: 82px;
  border-radius: 45px;
  border: 4px solid rgba(255,255,255,.9);
  position: absolute;
  transition: .4s, background 1s;

}

.nudgeControl {
  display: block;
  position: absolute;
  z-index: 99;
  height: 50px;
  width: 70px;
  opacity: .4;
}
.nudgeControla1 {height: 155px;width: 30px;margin-top: 57px;}
.nudgeControlc1 {margin-left: 0px;}
.nudgeControle1 {margin-left: 80px;}
.nudgeControlg1 {margin-left: 290px;}
.nudgeControli1 {margin-left: 460px;}
.nudgeControlk1 {margin-left: 620px;}
.nudgeControlm1 {margin-left: 800px;}
.nudgeControlo1 {margin-left: 980px;}
.nudgeControlq1 {margin-left: 1180px;}
.nudgeControls1 {margin-left: 1340px;}
.nudgeControlu1 {margin-left: 1520px;}
.nudgeControlw1 {margin-left: 1700px;}

.nudgeControla0bottom {margin-top: 220px;}
.nudgeControla1bottom {margin-top: 200px;margin-left: 280px;height:70px;}
.nudgeControlc1bottom {margin-top: 200px;margin-left: 444px;height:70px;}
.nudgeControle1bottom {margin-top: 200px;margin-left: 620px;height:70px;}
.nudgeControlg1bottom {margin-top: 200px;margin-left: 800px;height:70px;}
.nudgeControli1bottom {margin-top: 200px;margin-left: 980px;height:70px;}
.nudgeControlk1bottom {margin-top: 200px;margin-left: 1170px;height:70px;}
.nudgeControlm1bottom {margin-top: 200px;margin-left: 1340px;height:70px;}
.nudgeControlo1bottom {margin-top: 200px;margin-left: 1520px;height:70px;}
.nudgeControlq1bottom {margin-top: 200px;margin-left: 1700px;height:70px;}


.nudgeControlb2 {margin-left: 74px;height:100px;}
.nudgeControlb4 {margin-left: 190px;height:100px;}
.nudgeControlb6 {margin-left: 349px;height:100px;}
.nudgeControlb8 {margin-left: 530px;height:100px;}
.nudgeControlb10 {margin-left: 710px;height:100px;}
.nudgeControlb12 {margin-left: 891px;height:100px;}
.nudgeControlb14 {margin-left:...

JavaScript

var colors =...