JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<div id="particle-container">
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
	<div class="particle"></div>
</div>

CSS

body {
  background: #ecf3f3;
}

.particle {
  position: absolute;
  border-radius: 50%;
}

@-webkit-keyframes particle-animation-1 {
  100% {
    -webkit-transform: translate3d(27vw, 85vh, 86px);
            transform: translate3d(27vw, 85vh, 86px);
  }
}

@keyframes particle-animation-1 {
  100% {
    -webkit-transform: translate3d(27vw, 85vh, 86px);
            transform: translate3d(27vw, 85vh, 86px);
  }
}
.particle:nth-child(1) {
  -webkit-animation: particle-animation-1 60s infinite;
          animation: particle-animation-1 60s infinite;
  opacity: 0.59;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
  -webkit-transform: translate3d(37vw, 8vh, 47px);
          transform: translate3d(37vw, 8vh, 47px);
  background: #d97726;
}

@-webkit-keyframes particle-animation-2 {
  100% {
    -webkit-transform: translate3d(23vw, 86vh, 83px);
            transform: translate3d(23vw, 86vh, 83px);
  }
}

@keyframes particle-animation-2 {
  100% {
    -webkit-transform: translate3d(23vw, 86vh, 83px);
            transform: translate3d(23vw, 86vh, 83px);
  }
}
.particle:nth-child(2) {
  -webkit-animation: particle-animation-2 60s infinite;
          animation: particle-animation-2 60s infinite;
  opacity: 0.66;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
  -webkit-transform: translate3d(69vw, 31vh, 53px);
          transform: translate3d(69vw, 31vh, 53px);
  background: #d626d9;
}

@-webkit-keyframes particle-animation-3 {
  100% {
    -webkit-transform: translate3d(62vw, 51vh, 39px);
            transform: translate3d(62vw, 51vh, 39px);
  }
}

@keyframes particle-animation-3 {
  100% {
    -webkit-transform: translate3d(62vw, 51vh, 39px);
            transform: translate3d(62vw, 51vh, 39px);
  }
}
.particle:nth-child(3) {
  -webkit-animation: particle-animation-3 60s infinite;
          animation: particle-animation-3 60s infinite;
  opacity: 0.91;
  height: 7px;
 ...