Onglets (tabs)

<div class="fr-tabs">
    <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
        <li role="presentation">
            <button id="tabpanel-617" class="fr-tabs__tab fr-fi-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-617-panel">Label Tab 1</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-618" class="fr-tabs__tab fr-fi-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-618-panel">Label Tab 2</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-619" class="fr-tabs__tab fr-fi-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-619-panel">Label Tab 3</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-620" class="fr-tabs__tab fr-fi-checkbox-circle-line fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-620-panel">Label Tab 4</button>
        </li>
    </ul>
    <div id="tabpanel-617-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-617" tabindex="0">
        <!-- données de test -->
    </div>
    <div id="tabpanel-618-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-618" tabindex="0">
        <!-- données de test -->
    </div>
    <div id="tabpanel-619-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-619" tabindex="0">
        <!-- données de test -->
    </div>
    <div id="tabpanel-620-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-620" tabindex="0">
        <!-- données de test -->
    </div>
</div>

<div class="fr-tabs">
    <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
        <li role="presentation">
            <button id="tabpanel-624" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-624-panel">Label Tab 1</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-625" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-625-panel">Label Tab 2</button>
        </li>
    </ul>
    <div id="tabpanel-624-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-624" tabindex="0">
        <!-- données de test -->
    </div>
    <div id="tabpanel-625-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-625" tabindex="0">
        <!-- données de test -->
    </div>
</div>

<div class="fr-tabs">
    <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
        <li role="presentation">
            <button id="tabpanel-667" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-667-panel">Main Tab 0</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-668" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-668-panel">Main Tab 1</button>
        </li>
    </ul>
    <div id="tabpanel-667-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-667" tabindex="0">
        <div class="fr-tabs">
            <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
                <li role="presentation">
                    <button id="tabpanel-657" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-657-panel">Nested Tab s0</button>
                </li>
                <li role="presentation">
                    <button id="tabpanel-658" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-658-panel">Nested Tab s1</button>
                </li>
                <li role="presentation">
                    <button id="tabpanel-659" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-659-panel">Nested Tab s2</button>
                </li>
            </ul>
            <div id="tabpanel-657-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-657" tabindex="0">
                <div class="fr-tabs">
                    <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
                        <li role="presentation">
                            <button id="tabpanel-648" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-648-panel">Label Tab 1</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-649" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-649-panel">Label Tab 2</button>
                        </li>
                    </ul>
                    <div id="tabpanel-648-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-648" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-649-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-649" tabindex="0">
                        <!-- données de test -->
                    </div>
                </div>
            </div>
            <div id="tabpanel-658-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-658" tabindex="0">
                <div class="fr-tabs">
                    <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
                        <li role="presentation">
                            <button id="tabpanel-650" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-650-panel">Label Tab 1</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-651" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-651-panel">Label Tab 2</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-652" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-652-panel">Label Tab 3</button>
                        </li>
                    </ul>
                    <div id="tabpanel-650-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-650" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-651-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-651" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-652-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-652" tabindex="0">
                        <!-- données de test -->
                    </div>
                </div>
            </div>
            <div id="tabpanel-659-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-659" tabindex="0">
                <div class="fr-tabs">
                    <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
                        <li role="presentation">
                            <button id="tabpanel-653" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-653-panel">Label Tab 1</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-654" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-654-panel">Label Tab 2</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-655" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-655-panel">Label Tab 3</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-656" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-656-panel">Label Tab 4</button>
                        </li>
                    </ul>
                    <div id="tabpanel-653-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-653" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-654-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-654" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-655-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-655" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-656-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-656" tabindex="0">
                        <!-- données de test -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="tabpanel-668-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-668" tabindex="0">
        <div class="fr-tabs">
            <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
                <li role="presentation">
                    <button id="tabpanel-665" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-665-panel">Nested Tab s0</button>
                </li>
                <li role="presentation">
                    <button id="tabpanel-666" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-666-panel">Nested Tab s1</button>
                </li>
            </ul>
            <div id="tabpanel-665-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-665" tabindex="0">
                <div class="fr-tabs">
                    <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
                        <li role="presentation">
                            <button id="tabpanel-660" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-660-panel">Label Tab 1</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-661" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-661-panel">Label Tab 2</button>
                        </li>
                    </ul>
                    <div id="tabpanel-660-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-660" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-661-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-661" tabindex="0">
                        <!-- données de test -->
                    </div>
                </div>
            </div>
            <div id="tabpanel-666-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-666" tabindex="0">
                <div class="fr-tabs">
                    <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
                        <li role="presentation">
                            <button id="tabpanel-662" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-662-panel">Label Tab 1</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-663" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-663-panel">Label Tab 2</button>
                        </li>
                        <li role="presentation">
                            <button id="tabpanel-664" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-664-panel">Label Tab 3</button>
                        </li>
                    </ul>
                    <div id="tabpanel-662-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-662" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-663-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-663" tabindex="0">
                        <!-- données de test -->
                    </div>
                    <div id="tabpanel-664-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-664" tabindex="0">
                        <!-- données de test -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="fr-tabs">
    <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
        <li role="presentation">
            <button id="tabpanel-676" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-676-panel">Label Tab 1</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-677" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-677-panel">Label Tab 2</button>
        </li>
    </ul>
    <div id="tabpanel-676-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-676" tabindex="0">
        <section class="fr-accordion">
            <h3 class="fr-accordion__title">
                <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-674">Intitulé accordéon</button>
            </h3>
            <div class="fr-collapse" id="accordion-674">
                <!-- données de test -->
            </div>
        </section>
    </div>
    <div id="tabpanel-677-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-677" tabindex="0">
        <section class="fr-accordion">
            <h3 class="fr-accordion__title">
                <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-675">Intitulé accordéon</button>
            </h3>
            <div class="fr-collapse" id="accordion-675">
                <!-- données de test -->
            </div>
        </section>
    </div>
</div>