JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<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 591 151.5" style="enable-background:new 0 0 591 151.5;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#7F3F98;}
	.st1{fill:#6D6E71;}
</style>
 
	<path class="st0 car1" d="M478.1,55.9c8-3.7-27.7,1.7-73.3-18.6c-45.5-20.2-73.7-18.8-114.6-18.8s-65.4,16.3-87.5,28.6
		c-22.1,12.3-0.4,8.3-69.8,16.3c-69.4,8-69.4,34-69.4,34s18-23.2,93.6-23.2S433.9,76.2,478.1,55.9z M204.2,58.8
		c7.5-6.2,37.7-29.9,65.3-32.2c31.8-2.7,73.9-3.9,98.8,6.5c24.8,10.4,28.3,22.6,28.3,22.6l-191.8,4.6
		C203.9,60.2,203.6,59.3,204.2,58.8z"/>
	<path class="st0 car2" d="M171.5,80C100.6,73.8,69.7,97.4,69.7,97.4s41.6-19.7,103-8.6c61.4,11.1,139.6,8.2,179.4,4.4
		c77-7.3,128.4-32.9,128.4-32.9C322.9,94.6,242.3,86.2,171.5,80z"/>
	<path class="st0 car4" d="M213.3,58h13.1c1.6,0,3.1-1.1,3.4-2.7c0.3-2-1.2-3.8-3.2-3.8h-7.8c-1.6,0-3.2,0.7-4.3,1.9l-2.2,2.3
		C211.5,56.5,212.1,58,213.3,58z"/>
	<path class="st0 car3" d="M474,67c-41.4,20.5-82.9,24-82.9,24C457.8,90.7,474,67,474,67z"/>
 
	<path class="st1" d="M17.5,128.3c0,2,1.1,3.1,3.1,3.1h24.9c0.7,0,1,0.3,1,1v2c0,0.7-0.3,1-1,1H19.4c-4.2,0-6.5-2.4-6.5-6.5v-9.1
		c0-4.1,2.3-6.5,6.5-6.5h26.1c0.7,0,1,0.3,1,1v2c0,0.7-0.3,1-1,1H20.6c-2,0-3.1,1.1-3.1,3.1v2h24.9c0.7,0,1,0.3,1,1v1.8
		c0,0.7-0.3,1-1,1H17.5V128.3z"/>
	<path class="st1" d="M70.7,125.7v-0.8c0-1.4-0.8-2.2-2.1-2.2h-18c-0.6,0-0.9-0.3-0.9-0.9V120c0-0.6,0.3-0.9,0.9-0.9h19.3
		c3,0,4.9,2,4.9,4.9v6.8c0,3-1.7,4.6-4.6,4.6H53.3c-2.9,0-4.5-1.6-4.5-4.5v-0.8c0-2.9,1.5-4.5,4.5-4.5H70.7z M69.2,131.8
		c1.1,0,1.5-0.6,1.5-1.6v-1.4H54.4c-1,0-1.4,0.5-1.4,1.4v0.2c0,0.9,0.4,1.4,1.4,1.4H69.2z"/>
	<path class="st1"...

CSS

.car1{
  opacity: 0;
  -webkit-animation: reveal .5s forwards ease-in; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: .5s; /* Safari 4.0 - 8.0 */
  animation: reveal .5s forwards ease-in;
  animation-delay: .5s;
  }
.car2{
  opacity: 0;
  -webkit-animation: reveal .5 forwards ease-in; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: .8s; /* Safari 4.0 - 8.0 */
  animation: reveal .5s forwards ease-in;
  animation-delay: .8s;
  }
.car3{
  opacity: 0;
  -webkit-animation: reveal .5 forwards ease-in; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 1.3s; /* Safari 4.0 - 8.0 */
  animation: reveal .5s forwards ease-in;
  animation-delay: 1.3s;
  }
.car4{
  opacity: 0;
  -webkit-animation: reveal .5 forwards ease-in; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 1.8s; /* Safari 4.0 - 8.0 */
  animation: reveal .5s forwards ease-in;
  animation-delay: 1.8s;
  }
.st1 { 
  
  opacity: 0;
  -webkit-animation: reveal 0 forwards ease-in; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 1.8s; /* Safari 4.0 - 8.0 */
  animation: reveal 0s forwards ease-in;
  animation-delay: 2.3s;
  }
 
@-webkit-keyframes reveal {
  from { opacity: 0 ;}
  to { opacity: 1;}
}

@keyframes reveal {
  from { opacity: 0 ;}
  to { opacity: 1;}
}