JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="g-emoji">
    <div class="g-foo"></div>
    <div class="g-bar"></div>
    <div class="g-baz"></div>
</div>

CSS

body,
html {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: conic-gradient(#fff, #fff 90deg, #ddd 90deg, #ddd 180deg, #fff 180deg, #fff 270deg, #ddd 270deg);
  background-size: 50px 50px;
}

.g-emoji {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 2000px;
  transform-style: preserve-3d;
  font-size: 200px;
  animation: rotate 2.3s alternate infinite ease-in-out,
    fall .6s alternate infinite cubic-bezier(.22, .16, .04, .99) forwards;

  &::before,
  &::after {
    content: "";
    background: url("https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img1u6qw3ad64bz8nsedrd2wddgrax5wew.jpg") center/cover;
    border-radius: 50%;
    border: 16px solid black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
  }

  &::after {
    transform: translate(-50%, -50%) translateZ(-2px);
  }

  .g-foo,
  .g-bar,
  .g-baz {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
  }

  .g-foo::before,
  .g-foo::after,
  .g-bar::before,
  .g-bar::after,
  .g-baz::before,
  .g-baz::after {
    content: "";
    background: url("https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img1u6qw3ad64bz8nsedrd2wddgrax5wew.jpg") center/cover;
    border-radius: 50%;
    border: 16px solid black;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
  }

  .g-foo::before {
    transform: translate(-50%, -50%) translateZ(-4px);
    opacity: .95;
  }

  .g-foo::after {
    transform: translate(-50%, -50%) translateZ(-6px);
    opacity: .9;
  }

  .g-bar::before {
    transform: translate(-50%, -50%) translateZ(-8px);
    opacity: .85;
  }

  .g-bar::after {
    transform: translate(-50%, -50%) translateZ(-10px);
    opacity: .8;
  }

  .g-baz::before {
    transform: translate(-50%, -50%) translateZ(-12px);
    opacity: .75;
  }

  .g-baz::after {
   ...