JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<div class="crystal-bg">
  <div class="crystal">
    <!--.heart-->
    <!--.heart-2-->
    <!--.heart-3-->
    <div class="up up-1"></div>
    <div class="up up-2"></div>
    <div class="up up-3"></div>
    <div class="up up-4"></div>
    <div class="bottom bottom-1"></div>
    <div class="bottom bottom-2"></div>
    <div class="bottom bottom-3"></div>
    <div class="bottom bottom-4"></div>
  </div>
</div>

SCSS

$width: 140;

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.crystal-bg {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  width: 350px;
  height: 550px;
  //background: conic-gradient(from 90deg at 0 0, blue, red);
  //background-image: radial-gradient(circle at 50% 50%, rgba(black, .5), transparent), radial-gradient(circle at 0% 20%, #03FCF6, #476F93, #4D346E);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 1px 3px 1px rgba(black, .6);
  
  .crystal {
    height: #{$width}px;
    width: #{$width}px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 7s infinite linear;
    bottom: 50px;
    div {
      //background: purple;
      
      position: absolute;
      box-sizing: border-box;
      width: #{$width}px;
      height: #{$width}px;
      //border-left: #{$width / 2}px solid transparent;
      //border-right: #{$width / 2}px solid transparent;
      //border-bottom: #{$width}px solid rgba(white, .1);
      //backface-visibility: hidden;
    }
    .up {
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      background: conic-gradient(from 180deg at 40% 60%, #8214f7 36%, #ae86ff 36%, #ae86ff 64%, #8214f7 64%);
    }
    .bottom {
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      background: #ae86ff;
    }
    .up-1 {
      transform: translateZ(33px) rotateX(30deg);
    }
    .up-2 {
      transform: translateZ(-33px) rotateX(-30deg);
    }
    .up-3 {
      transform: rotateY(90deg) translateZ(33px) rotateX(30deg);
    }
    .up-4 {
      transform: rotateY(90deg) translateZ(-33px) rotateX(-30deg);
    }
    .bottom-1 {
      transform: rotateX(180deg) translateY(-120px) translateZ(-33px) rotateX(-30deg);
    }
    .bottom-2 {
      transform: rotateX(180deg) translateY(-120px) translateZ(33px) rotateX(30deg);
    }
    .bottom-3 {
      transform: rotateY(90deg) rotateX(180deg) translateY(-101px)...