JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 
Send the forms and check your network tab 
to see which data gets sent when submitting each form
-->


<form id="outer" action="/dev/null" method="POST" target="nowhere">
    <input name="belongs-to-outer"/>
    <input type="submit" value="outer"/>
    
    <!-- This imitates our nested form -->
    <div>
        <!-- binding the inputs to our fake form (form="inner")-->
        <input name="belongs-to-inner" form="inner"/>
        <input type="submit" value="inner" form="inner"/>
    </div>
</form>

 <!-- The inner form actually placed outside to stay conform to the standards -->
<form id="inner" action="/dev/null" method="POST" target="nowhere"> 
</form>

 <!-- Just an iFrame where the forms get sent, because we do not want the page to change -->
<iframe name="nowhere" ></iframe>