JSFiddle - React, Tailwind, and code Playground

HTML

<div class="particles">
  <div id="particle1" class="particle" style="background-color: #4caf50;"></div>
  <div id="particle2" class="particle" style="background-color: #3f51b5;"></div>
  <div id="particle3" class="particle" style="background-color: #e91e63;"></div>
  <div id="particle4" class="particle" style="background-color: #ffeb3b;"></div>
</div>
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: linear-gradient(to right, #4caf50, #3f51b5, #e91e63, #ffeb3b);
        background-size: 400% 400%;
        animation: color-change 20s ease infinite;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
  
      @keyframes color-change {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
  
      @keyframes rotate {
        0% {
          transform: rotate3d(1, 1, 1, 0deg);
        }
        100% {
          transform: rotate3d(1, 1, 1, 360deg);
        }
      }
  
      .diamond {
        width: 100px;
        height: 100px;
        animation: rotate 5s linear infinite;
        transform-style: preserve-3d;
        transform: rotate3d(1, 1, 1, 45deg);
      }
  
      .diamond:before {
        content: "";
        display: block;
        position: absolute;
        top: -50px;
        left: 25px;
        width: 50px;
        height: 100px;
        transform: rotate3d(1, 1, 1, -45deg) translate3d(0, 0, 50px);
        transform-origin: top left;
        background-color: yellow;
      }
  
      .diamond:after {
        content: "";
        display: block;
        position: absolute;
        top: 50px;
        left: 25px;
        width: 50px;
        height: 100px;
        transform: rotate3d(1, 1, 1, 45deg) translate3d(0, 0, 50px);
        transform-origin: bottom left;
        background-color: yellow;
      }
    </style>
 ...

CSS

body {
  background: linear-gradient(to right, #4caf50, #3f51b5, #e91e63, #ffeb3b);
  background-size: 400% 400%;
  animation: color-change 20s ease infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

@keyframes color-change {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes rotate {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

.diamond {
  width: 100px;
  height: 100px;
  animation: rotate 5s linear infinite;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1, 1, 45deg);
}

.diamond:before {
  content: "";
  display: block;
  position: absolute;
  top: -50px;
  left: 25px;
  width: 50px;
  height: 100px;
  transform: rotate3d(1, 1, 1, -45deg) translate3d(0, 0, 50px);
  transform-origin: top left;
  background-color: yellow;
}

.diamond:after {
  content: "";
  display: block;
  position: absolute;
  top: 50px;
  left: 25px;
  width: 50px;
  height: 100px;
  transform: rotate3d(1, 1, 1, 45deg) translate3d(0, 0, 50px);
  transform-origin: bottom left;
  background-color: yellow;
}