---
layout: layout.vto
name: Tabs
---

<main>
    <h1>Tabs</h1>

    <script type="module" src="/dist/js/tabs.js"></script>
    <div>
        <div role="tablist">
            <button role="tab" id="tab-1" aria-controls="panel-1" aria-selected="true">Tab 1</button>
            <button role="tab" id="tab-2" aria-controls="panel-2">Tab 2</button>
            <button role="tab" id="tab-3" aria-controls="panel-3">Tab 3</button>
        </div>

        <div role="tabpanel" id="panel-1" aria-labelledby="tab-1"><p>This is the content for the first tab</div>
        <div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden><p>This is the content for the second tab</div>
        <div role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden><p>This is the content for the third tab</div>
    </div>
</main>