JSFiddle - React, Tailwind, and code Playground

by smombartz

HTML

<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
	<rect width="800" height="800" fill="#EEEEEE"/>
	<rect x="642.928" y="45" width="796.748" height="67.3056" transform="rotate(57.8879 642.928 45)" fill="white"/>
	<path fill-rule="evenodd" clip-rule="evenodd" d="M800 0H0V800H800V0ZM628.132 152H489.701V166.963C489.701 186.097 489.702 205.232 489.703 224.367C489.704 240.835 489.705 257.304 489.706 273.773H310.041L310.043 252.991C310.047 222.045 310.051 191.099 310.051 160.153V152.153H171.772V160.153C171.772 188.767 171.731 217.382 171.682 246.003L171.682 246.199C171.667 255.39 171.651 264.581 171.638 273.773H139V347.619H171.635C171.672 376.29 171.759 404.975 172.003 433.661C172.552 498.018 199.473 551.516 249.014 591.662C320.125 649.285 400.854 661.566 486.429 630.092C567.946 600.112 629.227 521.878 628.31 426.438C628.057 400.172 627.948 373.9 627.912 347.619H660.91V273.773H627.952C627.97 265.337 627.989 256.902 628.008 248.465V248.435L628.008 248.406C628.07 221.311 628.132 194.207 628.132 167.101V152ZM505.703 221.472C505.702 203.648 505.701 185.824 505.701 168H612.132C612.131 194.774 612.069 221.549 612.008 248.335V248.369C611.983 259.497 611.957 270.627 611.936 281.758L611.921 289.773H644.91V331.619H611.897L611.903 339.626C611.927 368.605 612.031 397.596 612.31 426.591C613.157 514.755 556.572 587.247 480.906 615.075C400.479 644.656 325.7 633.21 259.088 579.231C213.118 541.98 188.509 492.927 188.002 433.525C187.736 402.234 187.657 370.931 187.626 339.611L187.619 331.619H155V289.773H187.616L187.626 281.784C187.642 269.873 187.662 257.963 187.682 246.051L187.682 246.029C187.726 220.074 187.764 194.114 187.77 168.153H294.051C294.05 196.432 294.047 224.71 294.043 252.989L294.039 289.773H505.706V281.773C505.706 262.637 505.704 243.501 505.703 224.366V224.364L505.703 221.472ZM510.216 329.607H295.078L295.079 351.323V351.453C295.081 376.508 295.082 401.564 295.101 426.623C295.133 473.448 323.61...

CSS

#Flash {
    animation: Flash__x__1 1002ms 0ms linear forwards;
}

@keyframes Flash__x__1 {
    from {
        left: -109.0719223022461px;
    }

    to {
        left: 642.9281005859375px;
    }
}


#BG {
    animation: BG__fillColor__1 303ms 0ms linear forwards, BG__fillColor__2 851ms 303ms linear forwards, BG__fillColor__3 341ms 1154ms linear forwards;
}

@keyframes BG__fillColor__1 {
    from {
        background-color: rgba(237.65306442975998,237.65306442975998,237.65306442975998,1);
    }

    to {
        background-color: rgba(237.65306442975998,237.65306442975998,237.65306442975998,1);
    }
}
@keyframes BG__fillColor__2 {
    from {
        background-color: rgba(237.65306442975998,237.65306442975998,237.65306442975998,1);
    }

    to {
        background-color: rgba(255,255,255,1);
    }
}
@keyframes BG__fillColor__3 {
    from {
        background-color: rgba(255,255,255,1);
    }

    to {
        background-color: rgba(237.65306442975998,237.65306442975998,237.65306442975998,1);
    }
}