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"     stroke-width="1.5" fill="slategrey">
<animate attributeName="height"   from="0" to="40" begin="button.click" dur="1s" />
<animateColor attributeName="stroke"  to="#000"   begin="button.click+1" dur="1s" attributeType="CSS" fill = "freeze"  />

</rect>
<line x1="120" y1="150" x2="260" y2="150" stroke="black" stroke-width="1.5"  >
    </line>
<line x1="120" y1="150" x2="120" y2="150" stroke="green" stroke-width="1.5">
<animate attributeName="x2" from="121" to="240" 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;
    
}