JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<div class="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

CSS

.container {
  position: relative;
  width: 200px;
  height: 200px; }

.circle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: moveRandom 1s linear 0s infinite; 
 }
  .circle:nth-child(7) {
    left: 0%;
    top: 5%;
    background-color: #B364FF; }
  .circle:nth-child(2) {
    left: 10%;
    top: 20%;
    background-color: #4DE6FF; }
  .circle:nth-child(3) {
    left: 30%;
    top: 30%;
    background-color: #EF6565; }
  .circle:nth-child(4) {
    left: 80%;
    top: 80%;
    background-color: #FFC522; }
  .circle:nth-child(5) {
    left: 90%;
    top: 90%;
    background-color: #4DE6FF; }
  .circle:nth-child(6) {
    left: 50%;
    top: 100%;
    background-color: #EF6565; }
  .circle:nth-child(even) {
    width: 12px;
    height: 12px; }

@keyframes moveRandom {
  0% {
    transform: translate3d(4px -4px, 10px); }
  50% {
    transform: translate3d(8px -8px, 10px); }
  100% {
    transform: translate3d(0px 0px, 10px); } }