Tabs in blocks behaves strangely?

Not sure If it is a mistake on my side or if it is related to widgets.

I have added a block that have tabs using the standard code for tabs and for some reason it jumps down to the next widget block when selecting a tab and on mobile it does not switch over to the scroller and instead the tabs are crushed.

The code for the tabs work well in templates, but seem to behave differently in widgets?

<!-- Tabs -->
<section class="jwseAtlassian-tabs" style="margin: 20px;">
<div class="ipsTabs ipsTabs--sticky ipsTabs--atlassian ipsTabs--stretch" id="elAtlassianTabs" data-ipstabbar="" data-ipstabbar-contentarea="#elAtlassianTabs_content">    
    <ul role="tablist">
        <li>
        <a href="#p" id="elAtlassianTab_products" class="ipsTabs__tab ipsTabs__tab--active" role="tab" aria-selected="true">Atlassian products</a>
        </li>
        <li>
        <a href="#" id="elAtlassianTab_teamwork" class="ipsTabs__tab" role="tab" aria-selected="false">Teamwork</a>
        </li>
        <li>
        <a href="#" id="elAtlassianTab_leadership" class="ipsTabs__tab" role="tab" aria-selected="false">Leadership</a>
        </li>
        <li>
        <a href="#" id="elAtlassianTab_service" class="ipsTabs__tab" role="tab" aria-selected="false">Service</a>
        </li>
        <li>
        <a href="#" id="elAtlassianTab_software" class="ipsTabs__tab" role="tab" aria-selected="false">Software</a>
        </li>
        <li>
        <a href="#" id="elAtlassianTab_product" class="ipsTabs__tab" role="tab" aria-selected="false">Product</a>
        </li>
    </ul>
</div>

<!-- Scrollers -->
<div class="ipsTabs__scrollers" data-role="tabScrollers">
	<button data-direction="prev" type="button" aria-hidden="true" tabindex="-1" hidden=""><i class="fa-solid fa-angle-left" aria-hidden="true"></i></button>
	<button data-direction="next" type="button" aria-hidden="true" tabindex="-1" hidden=""><i class="fa-solid fa-angle-right" aria-hidden="true"></i></button>
</div>


<!-- Content -->
<div id="elAtlassianTabs_content" class="ipsTabs__panels ipsTabs__panels--atlassian">

    <div id="elAtlassianTab_products_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_products">
    {block="atlassian-products-products-intro"}
    </div>


    <div id="elAtlassianTab_teamwork_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_teamwork">
    {block="atlassian-products-teamwork"}
    </div>

    <div id="elAtlassianTab_leadership_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_leadership">
   {block="atlassian-products-leadership"}
    </div>

    <div id="elAtlassianTab_service_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_service">
   {block="atlassian-products-service"}
    </div>

    <div id="elAtlassianTab_software_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_software">
   {block="atlassian-products-software"}
    </div>

     <div id="elAtlassianTab_product_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_product">
   {block="atlassian-products-product"}
    </div>

</div>
</section>