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" />
<animate attributeName="stroke" from="#ddd" to="#000"   begin="button.click+1" dur="1s" attributeType="CSS" repeatCount="1"/>

</rect>


</svg>
<input type="button" id="button" class="button" value="go">

CSS

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