A component mounted at two points

I'm new to React and am trying to implement an HTML structure like this

<div class="heads">
    <div class="head">head1</div>
    <div class="head">head2</div>
    <div class="head">head3</div>
</div>
<div class="bodies">
    <div class="body">body1</div>
    <div class="body">body2</div>
    <div class="body">body3</div>
</div>

Each head-body pair (like head1-body1) belongs to a single component. Without changing the structure, how would I write such a component?

From my understanding, it needs to be "mounted" at two different points (in "heads" and in "bodies").

A practical example of such structure would be a tabbed dialog which has tab headers within the "heads" div and their contents within "bodies".

What I'm looking for is some code that would be able to translate this:

<Tabs ...>
    <Tab head="head1">body1</Tab>
    <Tab head="head2">body2</Tab>
    <Tab head="head3">body3</Tab>
</Tabs>        

into the above HTML structure. Is that possible in React?

from A component mounted at two points