JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="svgobject" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 		width="452px" height="452px" viewBox="0 0 461.5 461.5" >

  <g>
    <path fill="none" stroke="black"
          d="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239
             c-30.296,0-54.854-24.559-54.854-54.854l0,0
             c0-30.296,24.559-54.854,54.854-54.854h331.756
             C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"/>
		
    <rect id="rect" x="0" y="0" width="50" height="20" fill="gray"
            stroke="black" stroke-width="1" transform="translate(-25,-10)">
 
      <animateMotion path="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239
                           c-30.296,0-54.854-24.559-54.854-54.854l0,0
                           c0-30.296,24.559-54.854,54.854-54.854h331.756
                           C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"
                     begin= "0s" dur="2s" repeatCount="1" rotate="auto" fill="freeze"
                     keyPoints="1;0" keyTimes="0;1" calcMode="linear"/>
    		
    </rect>
  </g>

</svg>