JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					 viewBox="0 0 531 465" style="enable-background:new 0 0 531 465;" xml:space="preserve">
				<style type="text/css">
					.st0{fill:#FFC21F;}
				    /* .st1{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
    					.st2{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:4.8732,2.9239;}
    					.st3{stroke:#000000;stroke-miterlimit:10;} */

					

					/* .st4{fill:#FFC21F;stroke:#000000;stroke-miterlimit:10;}
					.st5{fill:#010101;}
					.st6{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;}
					.st7{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:1.024170e-002,0;}
					.st8{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:5.1209,3.0623,1.024170e-002,0;} */



					/* .st9{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:9.950495e-003,0;}
					 .st10{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:4.9752,2.9752,9.950495e-003,0;} */ 




					.st11{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:9.793314e-003,0;}
					.st12{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:4.8967,2.9282,9.793314e-003,0;}
					.st13{font-family:'OpenSans-Bold';}
					.st14{font-size:13px;}
					.st15{font-size:11px;}
					.st16{font-size:10px;}
					#dotted-lines {
					  stroke: url(#black-gradient);
					  fill: none;
					  stroke-width:3;
					  stroke-miterlimit: 10;
					  stroke-dasharray:4.8732,2.9239;
					}
					#dotted-lines-1 {
						stroke: url(#yellow-gradient);
						fill: none;
						stroke-width:3;
						stroke-miterlimit: 10;
						stroke-dasharray:4.8732,2.9239;
					}

					#dotted-lines-2 {
						stroke:...

CSS

html , body {
	height: 100%;
	padding: 0;
	margin: 0;
}

section {
	height: 100%;
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  animation-name: bounceInUp;
}

.animated {
	-webkit-animation-duration: 1.5s;
	-o-animation-duration: 1.5s;
	animation-duration: 1.5s;
}

.delay-05s {
	-webkit-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;
}

JavaScript

$(document).ready(function() {
  
  	var offset = parseInt($('#move-opacity').attr("offset"));
  	setInterval(function() {
  	  if (offset < 100) {
	  	  $('#move-opacity').attr("offset", offset + "%");
  	    $('#last-opacity').attr("offset", (offset + 1) + "%");
  	  }
  	  offset++;

  	}, 25);

    /* code for secound line animation */
    var offset1 = parseInt($('#move-opacity-1').attr('offset'));
    setInterval(function() {
      if (offset1 > 0) {
	     $('#move-opacity-1').attr("offset", offset1 + "%");
        $('#last-opacity-1').attr("offset", (offset1 + 1) + "%");
      }
      offset1--;

    }, 25);


  	$("#lock").attr( "class" , "animated bounceInUp");
    $("#quote-icon").attr( "class" , "animated bounceInUp delay-05s");


  	$("#lock").addClass("animated bounceInUp");

});