JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg id="cardAnimation" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 447.3 420" width="447.3px" height="420px" style="background: #fff">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }

      .cls-2 {
        opacity: 0.32;
        fill: url(#linear-gradient);
      }

      .cls-2, .cls-3, .cls-4, .cls-7, .cls-8 {
        isolation: isolate;
      }

      .cls-3 {
        fill: #1cb272;
        opacity: 0.3;
      }

      .cls-4, .cls-7, .cls-8, .cls-9 {
        fill: #006169;
      }

      .cls-4 {
        opacity: 0.1;
      }

      .cls-5 {
        fill: #9ec3c6;
      }

      .cls-6 {
        opacity: 0.5;
      }

      .cls-7 {
        opacity: 0.4;
      }

      .cls-8 {
        opacity: 0.6;
      }

      #cardTop {
        animation: topCard 1s ease-in-out infinite;
        transform-origin: center center;
        transform-box: fill-box;
        will-change: transform;
      }

      #cardBottom {
        animation: bottomCard 1s ease-in-out infinite;
        transform-origin: center bottom;
        transform-box: fill-box;
        will-change: transform;
      }

      @keyframes topCard {
      
          0% {
            transform: scale(1) translateY(0);
          }

          33.33% {
            transform: scale(0.8) translateY(-8px);
          }

          51% {
            transform: scale(1.2) translateY(0);   
          }

          70% {
             transform: scale(1) translateY(0);
          }

          100% {
             transform: scale(1) translateY(0);
          }
      }


      @keyframes bottomCard {
      
          0% {
            transform: scale(1) translateY(0);
          }

          6% {
            transform: scale(0.9);
          }

          40% {
            transform: scale(1.3) translateY(-7px);   
          }

          60% {
            transform: scale(0.9) translateY(-7px);   
          }

          73% {
            ...