JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<rect x="100" y="80" width="140" height="40" rx="60" ry="25" style="stroke:#ddd;opacity:0"     stroke-width="1.5" fill="slategrey">

<animate attributeName="opacity"   from="0" to="1" begin="button.click" dur="1s" attributeType="CSS" fill = "freeze"/>
<animateColor attributeName="stroke"  to="#000"   begin="button.click+1" dur="1s" attributeType="CSS" fill = "freeze"  />

</rect>

<line x1="120" y1="150" x2="250" y2="150" stroke="green" stroke-width="1.5"  >
<animate attributeName="x2" from="120" to="250" begin="button.click+2" dur="1s" fill = "freeze"/>
<animate attributeName="y2" from="150" to="150" begin="button.click+2" dur="1s" fill = "freeze"/>
    </line>
</svg>
<input type="button" id="button" class="button" value="go">

CSS

#button{
    position: absolute;
    top: 0px;
    
}