Tabs

                
                <div class="mb-6">

    <div class="inline-block text-xs p-1 mb-6 tu-border-width tu-border-radius tu-border-default tu-bg-default"
         role="tablist"
         aria-label="Tabs">

        <button
                class="tc-btn border-0 hover:backdrop-brightness-95 dark:hover:backdrop-brightness-75 aria-selected:tc-style-primary aria-selected:hover:backdrop-brightness-100"
                id="example-buttons-tab-1"
                role="tab"
                aria-selected="true"
                aria-controls="example-buttons-panel-1"
                tabindex="0">
            Tab 1
        </button>
        <button
                class="tc-btn border-0 hover:backdrop-brightness-95 dark:hover:backdrop-brightness-75 aria-selected:tc-style-primary aria-selected:hover:backdrop-brightness-100"
                id="example-buttons-tab-2"
                role="tab"
                aria-selected="false"
                aria-controls="example-buttons-panel-2"
                tabindex="-1">
            Tab 2
        </button>

    </div>

    <div id="example-buttons-panel-1" role="tabpanel" tabindex="0" aria-labelledby="example-buttons-tab-1">

        <div class="tu-typo">

            <h3>Tab 1 content</h3>

            <p>
                This is the content for the first tab.
            </p>

        </div>

    </div> <!-- /#example-buttons-panel-1 -->

    <div id="example-buttons-panel-2" role="tabpanel" tabindex="0" aria-labelledby="example-buttons-tab-2" hidden>

        <div class="tu-typo">

            <h3>Tab 2 content</h3>

            <p>
                This is the content for the second tab.
            </p>

        </div>

    </div> <!-- /#example-buttons-panel-2 -->

</div> <!-- / tab container -->
                
            

                
                <div class="mb-6">

    <div class="text-sm mb-6 border-b tu-border-default"
         role="tablist"
         aria-label="Tabs">

        <button
                class="inline-flex items-center text-center px-2 py-3 font-semibold cursor-pointer border-theme-primary hover:text-theme-primary aria-selected:text-theme-primary aria-selected:border-b-[3px]"
                id="example-underline-tab-1"
                role="tab"
                aria-selected="true"
                aria-controls="example-underline-panel-1"
                tabindex="0">
            Tab 1
        </button>
        <button
                class="inline-flex items-center text-center px-2 py-3 font-semibold cursor-pointer border-theme-primary hover:text-theme-primary aria-selected:text-theme-primary aria-selected:border-b-[3px]"
                id="example-underline-tab-2"
                role="tab"
                aria-selected="false"
                aria-controls="example-underline-panel-2"
                tabindex="-1">
            Tab 2
        </button>

    </div>

    <div id="example-underline-panel-1" role="tabpanel" tabindex="0" aria-labelledby="example-underline-tab-1">

        <div class="tu-typo">

            <h3>Tab 1 content</h3>

            <p>
                This is the content for the first tab.
            </p>

        </div>

    </div> <!-- /#example-underline-panel-1 -->

    <div id="example-underline-panel-2" role="tabpanel" tabindex="0" aria-labelledby="example-underline-tab-2" hidden>

        <div class="tu-typo">

            <h3>Tab 2 content</h3>

            <p>
                This is the content for the second tab.
            </p>

        </div>

    </div> <!-- /#example-underline-panel-2 -->

</div> <!-- / tab container -->