<div class="tabs-wrapper">
<div class="tabs-container">
<div data-current="Subscriptions" data-easing="ease" data-duration-in="300" data-duration-out="100" class="tabs w-tabs" role="tablist">
<!-- Tab Menu -->
<div class="tabs-menu w-tab-menu">
<!-- Subscriptions Tab -->
<a data-w-tab="Subscriptions" class="tab w-inline-block w-tab-link w--current" role="tab" aria-selected="true" aria-controls="tab-subscriptions">
<div class="tab-icon w-embed">
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M48 112V80H80v32H48zM16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40C26.7 48 16 58.7 16 72zm160 8c-8.8 0-16 7.2-16 16s7.2 16 16 16H496c8.8 0 16-7.2 16-16s-7.2-16-16-16H176zm0 160c-8.8 0-16 7.2-16 16s7.2 16 16 16H496c8.8 0 16-7.2 16-16s-7.2-16-16-16H176z"></path></svg>
</div>
<div class="tab-name">Subscriptions</div>
<div class="counter"><div class="counter-text">2<br></div></div>
</a>
<!-- Invoices Tab -->
<a data-w-tab="Invoices" class="tab w-inline-block w-tab-link" role="tab" aria-selected="false" aria-controls="tab-invoices">
<div class="tab-icon w-embed">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="21" y="16" width="2" height="2"></rect><rect x="9" y="16" width="8" height="2"></rect><rect x="21" y="12" width="2" height="2"></rect><rect x="9" y="12" width="8" height="2"></rect></svg>
</div>
<div class="tab-name">Invoices</div>
<div class="counter"><div class="counter-text">1<br></div></div>
</a>
<!-- Payment Methods Tab -->
<a data-w-tab="Payment Methods" class="tab w-inline-block w-tab-link" role="tab" aria-selected="false" aria-controls="tab-payment-methods">
<div class="tab-icon w-embed">
<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28,6H4A2,2,0,0,0,2,8V24a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V8A2,2,0,0,0,28,6Zm0,2v3H4V8ZM4,24V13H28V24Z"></path></svg>
</div>
<div class="tab-name">Payment Methods</div>
<div class="counter"><div class="counter-text">3<br></div></div>
</a>
<!-- Settings Tab -->
<a data-w-tab="Settings" class="tab w-inline-block w-tab-link" role="tab" aria-selected="false" aria-controls="tab-settings">
<div class="tab-icon w-embed">
<svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m388-80-20-126q-19-7-40-19t-37-25l-118 54-93-164 108-79q-2-9-2.5-20.5T185-480q0-9 .5-20.5T188-521L80-600l93-164 118 54q16-13 37-25t40-18l20-127h184l20 126q19 7 40.5 18.5T669-710l118-54 93 164-108 77q2 10 2.5 21.5t.5 21.5q0 10-.5 21t-2.5 21l108 78-93 164-118-54q-16 13-36.5 25.5T592-206L572-80H388Z"></path></svg>
</div>
<div class="tab-name">Settings</div>
</a>
</div>
<!-- Individual Tab Content -->
<div class="tabs-content w-tab-content">
<div id="tab-subscriptions" data-w-tab="Subscriptions" class="tab-pane w-tab-pane w--tab-active" role="tabpanel" tabindex="0">{Subscriptions page}</div>
<div id="tab-invoices" data-w-tab="Invoices" class="tab-pane w-tab-pane" role="tabpanel" tabindex="0">{Invoices page}</div>
<div id="tab-payment-methods" data-w-tab="Payment Methods" class="tab-pane w-tab-pane" role="tabpanel" tabindex="0">{Payment Methods page}</div>
<div id="tab-settings" data-w-tab="Settings" class="tab-pane w-tab-pane" role="tabpanel" tabindex="0">{Settings page}</div>
</div>
</div>
</div>
<div class="tab-scroll-indicator">
<div class="code-embed-12 w-embed">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewbox="0 0 27.46 10.49"><defs><style>.b{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><polyline class="b" points="22.21 1 26.46 5.24 22.21 9.49"></polyline><polyline class="b" points="5.24 9.49 1 5.24 5.24 1"></polyline><line class="b" x1="26.46" y1="5.24" x2="16.56" y2="5.24"></line><line class="b" x1="1" y1="5.24" x2="10.9" y2="5.24"></line></svg>
</div>
</div>
</div>