JSFiddle - React, Tailwind, and code Playground

by Osama Qassar

HTML

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800px" height="738px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 3333 2741.9"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
 <defs>
 <style>
    .tri {
      fill: white; 
      opacity: 0;
      animation: 5.5s OP infinite;
    }
    .slide{
      fill: red; 
      transform-origin: center;
      animation: 2.5s SLIDE infinite;
    }
    @keyframes OP {
      0%   {opacity: 0;} 
      2%   {opacity: 0.5;} 
      4%   {opacity: 0;} 
      6%   {opacity: 0.5;} 
      10%  {opacity: 0;} 
      20%  {opacity: 0.5;}
      100% {opacity: 0;}
    }
    @keyframes SLIDE {
      0% { transform: translateX(0%);  transform: scale(2.5); opacity: 1}
      100% { transform: translateX(100vw);  transform: scale(0.1);  opacity: 0}
    }
    #itm2 {animation-delay: 0.5s}
    #itm3 {animation-delay: 1.0s}
    #itm4 {animation-delay: 1.5s}
    #itm5 {animation-delay: 2.0s}
    #itm6 {animation-delay: 2.5s}
    #itm7 {animation-delay: 3.0s}
    #itm8 {animation-delay: 3.5s}
    #itm9 {animation-delay: 4.0s}
    #itm10 {animation-delay: 4.5s}
    #itm11 {animation-delay: 5.0s}
    #itm12 {animation-delay: 5.5s}
    #itm13 {animation-delay: 6.0s}
    #itm14 {animation-delay: 6.5s}
    #itm15 {animation-delay: 7.0s}

    #item_slide1 {animation-delay: 0.5s}
  </style>
 </defs>
  <g>
   <polygon class="tri" id="itm1" points="109.22,955.42 109.22,1117.54 239.49,982.08 "/>
   <polygon class="tri" id="itm2" points="404.18,870.17 395.66,1054.46 549.8,949.69 "/>
   <polygon class="tri" id="itm3" points="602.78,971.97 609.51,1121.37 740.1,988.57 "/>
   <polygon class="tri" id="itm4" points="713.74,1053.02 705.22,1237.31 850.39,1123.57 "/>
   <polygon class="tri" id="itm5" points="633.12,1138.09 631.21,1191.12 675.31,1161.14 "/>
   <polygon...