JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
     width="144px" height="144px"
     viewBox="0 0 144 144">
	<defs>
    <style type="text/css"><![CDATA[
      svg {
  max-width: 80%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
svg path {
  stroke-width: 1;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: draw;
  animation-timing-function: linear;
}
svg path#case {
  stroke: #000;
  stroke-dasharray: 2810;
  stroke-dashoffset: 2810;
  animation-duration: 5s;
}
svg path#cooler {
  stroke: #000;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-duration: 2s;
  animation-delay: 4s;
}
svg path#structure {
  stroke: #000;
  stroke-dasharray: 680;
  stroke-dashoffset: 680;
  animation-duration: 3s;
  animation-delay: 2s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;fill: #000; stroke-width: 0;
  }
}
@keyframes show {
  to {
    opacity: 1;
  }
}

    ]]></style>
  </defs>
				<path fill="none" id="case"...