JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<div class="reaction-3vwAF2 shakeReaction-h226gy" style="opacity: 1; background: rgba(198, 176, 139, 0.2);">
   <div class="reactionInner-YJjOtT" aria-expanded="false" aria-disabled="false" aria-label="hanaBlankies，64 個超級反應，按下就能使用超級反應" aria-pressed="false" role="button" tabindex="0">
      <div class="burstGlow-3AZMzF" style="box-shadow: rgb(240, 234, 224) 0px 0px 16px;"></div>
      <div>
         <div class="effectsWrapper-1M6qbb">
            <div class="effect-3LmGg0 effect-2X-be6" style="transform: translateY(68px); height: 120px; width: 120px;">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="300" height="300" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;">
                  <defs>
                     <clipPath id="__lottie_element_9312">
                        <rect width="300" height="300" x="0" y="0"></rect>
                     </clipPath>
                     <image xlink:href="https://cdn.discordapp.com/emojis/1150481634638975136.gif?size=32&amp;quality=lossless"></image>
                     <mask id="__lottie_element_9334" mask-type="alpha">
                        <g transform="matrix(1,0,0,1,0,0)" opacity="1" style="display: block;">
                           <path fill="rgb(140,87,174)" fill-opacity="1" d=" M150,242.9 C150,242.9 150,242.9 150,242.9 C150,242.9 150,242.9 150,242.9 C150,242.9 150,242.9 150,242.9 C150,242.9 150,242.9 150,242.9z M210,57.65 C210,57.65 210,244.65 210,244.65 C210,244.65 90,244.65 90,244.65 C90,244.65 90,57.65 90,57.65 C90,57.65 210,57.65 210,57.65z M150,57.15 C150,57.15 150,57.15 150,57.15 C150,57.15 150,57.15 150,57.15 C150,57.15 150,57.15 150,57.15 C150,57.15 150,57.15 150,57.15z"></path>
                           <g opacity="1" transform="matrix(1,0,0,1,150,242.89599609375)"></g>
                           <g opacity="1" transform="matrix(1,0,0,1,150,57.150001525878906)"></g>
            ...

CSS

.effect-3LmGg0{position:absolute;pointer-events:none;bottom:0;overflow:hidden}
.effect-2X-be6{margin-bottom:-.125rem}
.effectsWrapper-1M6qbb {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
  z-index: 1;
}


.reaction-3vwAF2.shakeReaction-h226gy {
    -webkit-animation: shake-2By5IS .5s;
    animation: shake-2By5IS .5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes shake-2By5IS {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -1px) rotate(-1deg);
    transform: translate(-1px, -1px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-2px) rotate(1deg);
    transform: translate(-2px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
    transform: translate(2px, 1px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 1px) rotate(-1deg);
    transform: translate(-1px, 1px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-2px, 1px) rotate(0deg);
    transform: translate(-2px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
    transform: translate(2px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
    transform: translate(1px, 1px) rotate(0deg);
  }
  to {
    -webkit-transform: translate(1px, -1px) rotate(-1deg);
    transform: translate(1px, -1px) rotate(-1deg);
  }
}

@keyframes shake-2By5IS {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
    transform:...