Tabcordions

<section class="tcu-tabcordion">
    <header>
        <h2 class="tcu-tabcordion__header">Tabcordion Header</h2>
    </header>
    <div class="tcu-tabcordion__wrapper" role="tablist">

        <button role="tab" aria-selected="true" class="tcu-tabcordion__tab" aria-controls="tab-panel1" aria-expanded="true" id="tab-label1">
            Tab 1 Label<span></span>
        </button>

        <button role="tab" aria-selected="false" class="tcu-tabcordion__tab" aria-controls="tab-panel2" aria-expanded="false" id="tab-label2">
            Tab 2 Label<span></span>
        </button>

        <button role="tab" aria-selected="false" class="tcu-tabcordion__tab" aria-controls="tab-panel3" aria-expanded="false" id="tab-label3">
            Tab 3 Label<span></span>
        </button>

        <button role="tab" aria-selected="false" class="tcu-tabcordion__tab" aria-controls="tab-panel4" aria-expanded="false" id="tab-label4">
            Tab 4 Label<span></span>
        </button>

    </div>

    <div class="tcu-tabcordion__item" tabindex="-1" role="tabpanel" id="tab-panel1" aria-labelledby="tab-label1">
        <div class="tcu-tabcordion__content">
            <p>Tab 1 Content.</p>
        </div>
    </div>
    <div class="tcu-tabcordion__item" tabindex="-1" role="tabpanel" id="tab-panel2" aria-labelledby="tab-label2">
        <div class="tcu-tabcordion__content">
            <p>Tab 2 Content.</p>
        </div>
    </div>
    <div class="tcu-tabcordion__item" tabindex="-1" role="tabpanel" id="tab-panel3" aria-labelledby="tab-label3">
        <div class="tcu-tabcordion__content">
            <p>Tab 3 Content.</p>
        </div>
    </div>
    <div class="tcu-tabcordion__item" tabindex="-1" role="tabpanel" id="tab-panel4" aria-labelledby="tab-label4">
        <div class="tcu-tabcordion__content">
            <p>Tab 4 Content.</p>
        </div>
    </div>

</section>