JSFiddle - React, Tailwind, and code Playground
by Dhruvang Gajjar
HTML
<svg version="1.1" id="svg-approach-process" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="888.1px" height="1212px" viewBox="0 0 888.1 1212" enable-background="new 0 0 888.1 1212" xml:space="preserve">
<rect x="418.1" y="383" fill="#EBF5F7" width="44" height="18"></rect>
<path fill="#0085A1" d="M3.6,310"></path>
<g id="path-4" class=" is-revealed">
<g>
<line fill="none" stroke="#CCE7EC" stroke-width="4" stroke-miterlimit="10" x1="664.1" y1="568" x2="652.6" y2="568"></line>
<path fill="none" stroke="#CCE7EC" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="23.4757,5.1034" d="M647.5,568
H532.1c-49.5,0-90-40.5-90-90V308c0-49.5-36-90-80-90c-27.3,0-51.5,0-66,0"></path>
<path fill="none" stroke="#CCE7EC" stroke-width="4" stroke-miterlimit="10" d="M293.6,218c-7.3,0-11.5,0-11.5,0"></path>
</g>
</g>
<g id="path-3" class=" ">
<path fill="none" stroke="#73BCCB" stroke-width="4" stroke-miterlimit="10" d="M860.1,480.5c0,48.1-40.5,87.5-90,87.5h-237
c-49.5,0-90,40.5-90,90v554"></path>
</g>
<g id="path-2" class=" is-revealed">
<path fill="none" stroke="#73BCCB" stroke-width="4" stroke-miterlimit="10" d="M28.1,305.5c0,48.1,40.5,87.5,90,87.5h652
c49.5,0,90,39.4,90,87.5"></path>
</g>
<g id="path-1" class=" is-revealed">
<path fill="none" stroke="#73BCCB" stroke-width="4" stroke-miterlimit="10" d="M443.1,0v128c0,49.5-40.5,90-90,90h-235
c-49.5,0-90,39.4-90,87.5"></path>
</g>
<g id="node-7" class=" ">
<g>
<path fill="#FFFFFF" d="M460.1,991.1c0,9.8-8,17.9-17.9,17.9c-9.8,0-17.9-8-17.9-17.9s8-17.9,17.9-17.9
C452,973.3,460.1,981.3,460.1,991.1z"></path>
</g>
<g>
<path fill="#0085A1" d="M447.5,991.1c0,2.9-2.4,5.3-5.3,5.3s-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3S447.5,988.3,447.5,991.1z"></path>
</g>
<g>
<rect x="483.1" y="987" fill="none" width="220" height="22.5"></rect>
<text transform="matrix(1 0 0 1 483.0682 995.0299)" fill="#0085A1" font-family="'Gotham-Bold'"...