ska-theme includes an Alpine.js component for creating tabs.
For creating tabs, add the x-data="skaTabs" attribute to the root element.
The element that contains the buttons that change tabs should have the x-bind="tablist" attribute and individual buttons that allow to select a tab should have the x-bind="tabItem('tabId')" attribute with a unique ID that matches the content.
Content elements should have the x-bind="tab('tabId')" attribute.
There is 1 argument available for the skaTabs component: initialActive. Using x-data="skaTabs({initialActive: 'tabId'})" will configure which tab is initially active.
The conditions block is useful for keeping tabs organized in the block editor and only rendering one at a time.
export interface TabsConfig {
/** ID of tab that should be initially selected. */
initialActive?: string
}Example tabs
<!-- wp:ska/element {"metadata":{"name":"Tabs"},"skaBlocks":{"cx":"[\u0026_.tablist]:flex [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:inline-flex [\u0026_.tablist]:items-stretch [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:px-5 [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:py-2.5 [\u0026_.tabpanels]:*:p-5 mx-auto [\u0026_.tablist]:-mb-px max-w-3xl text-base [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:[\u0026.active]:font-semibold [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:bg-white [\u0026_.tabpanels]:bg-white [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:rounded-t-md [\u0026_.tabpanels]:rounded-b-md [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:border [\u0026_.tabpanels]:border [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:border-transparent [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:border-b-site-border [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:[\u0026.active]:border-site-border [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:[\u0026.active]:border-b-transparent","css":".\\[\\\u0026_\\.tablist\\]\\:flex .tablist{display:flex}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:inline-flex .tablist\u003eli\u003ebutton{display:inline-flex}.\\[\\\u0026_\\.tablist\\]\\:items-stretch .tablist{align-items:stretch}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:px-5 .tablist\u003eli\u003ebutton{padding-inline:var(\u002d\u002dspacing-5)}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:py-2\\.5 .tablist\u003eli\u003ebutton{padding-block:var(\u002d\u002dspacing-2_5)}:is(.\\[\\\u0026_\\.tabpanels\\]\\:\\*\\:p-5 .tabpanels\u003e*){padding:var(\u002d\u002dspacing-5)}.mx-auto{margin-inline:auto}.\\[\\\u0026_\\.tablist\\]\\:-mb-px .tablist{margin-bottom:-1px;margin-bottom:calc(var(\u002d\u002dspacing-px)*-1)}.max-w-3xl{max-width:var(\u002d\u002dcontainer-3xl)}.text-base{font-size:var(\u002d\u002dtext-base);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-base\u002d\u002dline-height))}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\.active\\]\\:font-semibold .tablist\u003eli\u003ebutton.active{\u002d\u002dtw-font-weight:var(\u002d\u002dfont-weight-semibold);font-weight:var(\u002d\u002dfont-weight-semibold)}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:bg-white .tablist\u003eli\u003ebutton{background-color:var(\u002d\u002dcolor-white)}.\\[\\\u0026_\\.tabpanels\\]\\:bg-white .tabpanels{background-color:var(\u002d\u002dcolor-white)}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:rounded-t-md .tablist\u003eli\u003ebutton{border-top-left-radius:var(\u002d\u002dradius-md);border-top-right-radius:var(\u002d\u002dradius-md)}.\\[\\\u0026_\\.tabpanels\\]\\:rounded-b-md .tabpanels{border-bottom-right-radius:var(\u002d\u002dradius-md);border-bottom-left-radius:var(\u002d\u002dradius-md)}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:border .tablist\u003eli\u003ebutton{border-style:var(\u002d\u002dtw-border-style);border-width:1px}.\\[\\\u0026_\\.tabpanels\\]\\:border .tabpanels{border-style:var(\u002d\u002dtw-border-style);border-width:1px}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:border-transparent .tablist\u003eli\u003ebutton{border-color:#0000}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:border-b-site-border .tablist\u003eli\u003ebutton{border-bottom-color:var(\u002d\u002dcolor-site-border)}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\.active\\]\\:border-site-border .tablist\u003eli\u003ebutton.active{border-color:var(\u002d\u002dcolor-site-border)}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\.active\\]\\:border-b-transparent .tablist\u003eli\u003ebutton.active{border-bottom-color:#0000}","t":1738813197},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaTabs({initialActive: 'first'})"}},"skaBlocksSelectors":{"[\u0026_.tablist]":{"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ebutton]":{"skaBlocksDisplay":{"v":{"$":{"@":"inline-flex"}}},"skaBlocksPadding":{"v":{"$":{"@":"","x":"5","y":"2.5"}},"t":"axis"},"skaBlocksBackgroundColor":{"v":{"$":{"@":"white"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"","t":"md"}},"t":"sides"},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT","t":"","r":"","l":""}},"t":"default"},"skaBlocksBorderColor":{"v":{"$":{"@":"transparent","b":"site-border"}},"t":"sides"},"skaBlocksSelectors":{"[\u0026.active]":{"skaBlocksBorderColor":{"v":{"$":{"@":"site-border","b":"transparent"}},"t":"sides"},"skaBlocksFontWeight":{"v":{"$":{"@":"semibold"}}}}}}}}},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"stretch"}}},"skaBlocksMargin":{"v":{"$":{"@":"","b":"-px"}},"t":"sides"}},"[\u0026_.tabpanels]":{"skaBlocksBackgroundColor":{"v":{"$":{"@":"white"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"","b":"md"}},"t":"sides"},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksSelectors":{"*":{"skaBlocksPadding":{"v":{"$":{"@":"5"}}}}}}},"skaBlocksMargin":{"v":{"$":{"@":"","x":"auto"}},"t":"axis"},"skaBlocksMaxWidth":{"v":{"$":{"@":"3xl"}}},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}}} -->
<div x-data="skaTabs({initialActive: 'first'})" class="[&_.tablist]:flex [&_.tablist]:[&>li]:[&>button]:inline-flex [&_.tablist]:items-stretch [&_.tablist]:[&>li]:[&>button]:px-5 [&_.tablist]:[&>li]:[&>button]:py-2.5 [&_.tabpanels]:*:p-5 mx-auto [&_.tablist]:-mb-px max-w-3xl text-base [&_.tablist]:[&>li]:[&>button]:[&.active]:font-semibold [&_.tablist]:[&>li]:[&>button]:bg-white [&_.tabpanels]:bg-white [&_.tablist]:[&>li]:[&>button]:rounded-t-md [&_.tabpanels]:rounded-b-md [&_.tablist]:[&>li]:[&>button]:border [&_.tabpanels]:border [&_.tablist]:[&>li]:[&>button]:border-transparent [&_.tablist]:[&>li]:[&>button]:border-b-site-border [&_.tablist]:[&>li]:[&>button]:[&.active]:border-site-border [&_.tablist]:[&>li]:[&>button]:[&.active]:border-b-transparent wp-block-ska-element"><!-- wp:ska/element {"skaBlocks":{"cx":"","css":"","t":1738813197},"skaBlocksAs":{"element":"ul"},"skaBlocksAttributes":{"record":{"x-bind":"tablist"}},"skaBlocksSelectors":[],"className":"tablist"} -->
<ul x-bind="tablist" class="wp-block-ska-element tablist"><!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"className":"active","skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('first')"}},"skaBlocks":{"cx":"","css":"","t":1738813197},"skaBlocksSelectors":[]} -->
<button x-bind="tabItem('first')" class="wp-block-ska-text ska-text active">Tab 1</button>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('second')"}}} -->
<button x-bind="tabItem('second')" class="wp-block-ska-text ska-text">Tab 2</button>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('third')"}}} -->
<button x-bind="tabItem('third')" class="wp-block-ska-text ska-text">Tab 3</button>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element --></ul>
<!-- /wp:ska/element -->
<!-- wp:ska/conditions {"skaBlocks":{"cx":"","css":"","t":1738813197},"skaBlocksAttributes":{"record":[]},"className":"tabpanels"} -->
<div class="wp-block-ska-conditions tabpanels"><!-- wp:ska/condition {"skaBlocksAttributes":{"record":{"x-bind":"tab('first')"}}} -->
<div x-bind="tab('first')" class="wp-block-ska-condition"><!-- wp:paragraph -->
<p>First</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition -->
<!-- wp:ska/condition {"skaBlocksAttributes":{"record":{"x-bind":"tab('second')"}}} -->
<div x-bind="tab('second')" class="wp-block-ska-condition"><!-- wp:paragraph -->
<p>Second</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition -->
<!-- wp:ska/condition {"skaBlocksAttributes":{"record":{"x-bind":"tab('third')"}}} -->
<div x-bind="tab('third')" class="wp-block-ska-condition"><!-- wp:paragraph -->
<p>Third</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition --></div>
<!-- /wp:ska/conditions --></div>
<!-- /wp:ska/element --><!-- wp:ska/element {"metadata":{"name":"Tabs"},"skaBlocks":{"cx":"[\u0026_.tablist]:flex [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:inline-flex [\u0026_.tablist]:gap-2 [\u0026_.tablist]:items-stretch [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:px-4 [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:py-1.5 [\u0026_.tabpanels]:*:p-4 mx-auto space-y-2 max-w-3xl text-base [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:bg-white [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:hover:bg-neutral-50 [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:[\u0026.active]:bg-neutral-100 [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:rounded [\u0026_.tabpanels]:*:rounded [\u0026_.tabpanels]:*:border [\u0026_.tabpanels]:*:shadow [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:transition-colors","css":".\\[\\\u0026_\\.tablist\\]\\:flex .tablist{display:flex}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:inline-flex .tablist\u003eli\u003ebutton{display:inline-flex}.\\[\\\u0026_\\.tablist\\]\\:gap-2 .tablist{gap:var(\u002d\u002dspacing-2)}.\\[\\\u0026_\\.tablist\\]\\:items-stretch .tablist{align-items:stretch}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:px-4 .tablist\u003eli\u003ebutton{padding-inline:var(\u002d\u002dspacing-4)}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:py-1\\.5 .tablist\u003eli\u003ebutton{padding-block:var(\u002d\u002dspacing-1_5)}:is(.\\[\\\u0026_\\.tabpanels\\]\\:\\*\\:p-4 .tabpanels\u003e*){padding:var(\u002d\u002dspacing-4)}.mx-auto{margin-inline:auto}:where(.space-y-2\u003e:not(:last-child)){\u002d\u002dtw-space-y-reverse:0;margin-block-start:calc(var(\u002d\u002dspacing-2)*var(\u002d\u002dtw-space-y-reverse));margin-block-end:calc(var(\u002d\u002dspacing-2)*calc(1 - var(\u002d\u002dtw-space-y-reverse)))}.max-w-3xl{max-width:var(\u002d\u002dcontainer-3xl)}.text-base{font-size:var(\u002d\u002dtext-base);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-base\u002d\u002dline-height))}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:bg-white .tablist\u003eli\u003ebutton{background-color:var(\u002d\u002dcolor-white)}@media (hover:hover){.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:hover\\:bg-neutral-50 .tablist\u003eli\u003ebutton:hover{background-color:var(\u002d\u002dcolor-neutral-50)}}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\.active\\]\\:bg-neutral-100 .tablist\u003eli\u003ebutton.active{background-color:var(\u002d\u002dcolor-neutral-100)}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:rounded .tablist\u003eli\u003ebutton{border-radius:var(\u002d\u002dradius)}:is(.\\[\\\u0026_\\.tabpanels\\]\\:\\*\\:rounded .tabpanels\u003e*){border-radius:var(\u002d\u002dradius)}:is(.\\[\\\u0026_\\.tabpanels\\]\\:\\*\\:border .tabpanels\u003e*){border-style:var(\u002d\u002dtw-border-style);border-width:1px}:is(.\\[\\\u0026_\\.tabpanels\\]\\:\\*\\:shadow .tabpanels\u003e*){\u002d\u002dtw-shadow:var(\u002d\u002dshadow-sm);box-shadow:var(\u002d\u002dtw-inset-shadow),var(\u002d\u002dtw-inset-ring-shadow),var(\u002d\u002dtw-ring-offset-shadow),var(\u002d\u002dtw-ring-shadow),var(\u002d\u002dtw-shadow)}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:transition-colors .tablist\u003eli\u003ebutton{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,\u002d\u002dtw-gradient-from,\u002d\u002dtw-gradient-via,\u002d\u002dtw-gradient-to;transition-timing-function:var(\u002d\u002dtw-ease,var(\u002d\u002ddefault-transition-timing-function));transition-duration:var(\u002d\u002dtw-duration,var(\u002d\u002ddefault-transition-duration))}","t":1738813197},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaTabs({initialActive: 'second'})"}},"skaBlocksSelectors":{"[\u0026_.tablist]":{"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ebutton]":{"skaBlocksDisplay":{"v":{"$":{"@":"inline-flex"}}},"skaBlocksPadding":{"v":{"$":{"@":"","x":"4","y":"1.5"}},"t":"axis"},"skaBlocksBackgroundColor":{"v":{"$":{"@":"white"},"hover":{"@":"neutral-50"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT","t":""}},"t":"default"},"skaBlocksSelectors":{"[\u0026.active]":{"skaBlocksBackgroundColor":{"v":{"$":{"@":"neutral-100"}}}}},"skaBlocksTransitionProperty":{"v":{"$":{"@":"colors"}}}}}}},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"stretch"}}},"skaBlocksGap":{"v":{"$":{"@":"2"}}}},"[\u0026_.tabpanels]":{"skaBlocksSelectors":{"*":{"skaBlocksPadding":{"v":{"$":{"@":"4"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}}}}}},"skaBlocksMargin":{"v":{"$":{"@":"","x":"auto"}},"t":"axis"},"skaBlocksSpaceBetween":{"v":{"$":{"@":"","y":"2"}}},"skaBlocksMaxWidth":{"v":{"$":{"@":"3xl"}}},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}}} -->
<div x-data="skaTabs({initialActive: 'second'})" class="[&_.tablist]:flex [&_.tablist]:[&>li]:[&>button]:inline-flex [&_.tablist]:gap-2 [&_.tablist]:items-stretch [&_.tablist]:[&>li]:[&>button]:px-4 [&_.tablist]:[&>li]:[&>button]:py-1.5 [&_.tabpanels]:*:p-4 mx-auto space-y-2 max-w-3xl text-base [&_.tablist]:[&>li]:[&>button]:bg-white [&_.tablist]:[&>li]:[&>button]:hover:bg-neutral-50 [&_.tablist]:[&>li]:[&>button]:[&.active]:bg-neutral-100 [&_.tablist]:[&>li]:[&>button]:rounded [&_.tabpanels]:*:rounded [&_.tabpanels]:*:border [&_.tabpanels]:*:shadow [&_.tablist]:[&>li]:[&>button]:transition-colors wp-block-ska-element"><!-- wp:ska/element {"skaBlocks":{"cx":"","css":"","t":1738813197},"skaBlocksAs":{"element":"ul"},"skaBlocksAttributes":{"record":{"x-bind":"tablist"}},"skaBlocksSelectors":[],"className":"tablist"} -->
<ul x-bind="tablist" class="wp-block-ska-element tablist"><!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"className":"active","skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('first')"}},"skaBlocks":{"cx":"","css":"","t":1738813197},"skaBlocksSelectors":[]} -->
<button x-bind="tabItem('first')" class="wp-block-ska-text ska-text active">Tab 1</button>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('second')"}}} -->
<button x-bind="tabItem('second')" class="wp-block-ska-text ska-text">Tab 2</button>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('third')"}}} -->
<button x-bind="tabItem('third')" class="wp-block-ska-text ska-text">Tab 3</button>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element --></ul>
<!-- /wp:ska/element -->
<!-- wp:ska/conditions {"skaBlocks":{"cx":"","css":"","t":1738813197},"skaBlocksAttributes":{"record":[]},"className":"tabpanels"} -->
<div class="wp-block-ska-conditions tabpanels"><!-- wp:ska/condition {"skaBlocksAttributes":{"record":{"x-bind":"tab('first')"}}} -->
<div x-bind="tab('first')" class="wp-block-ska-condition"><!-- wp:paragraph -->
<p>First</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition -->
<!-- wp:ska/condition {"skaBlocksAttributes":{"record":{"x-bind":"tab('second')"}}} -->
<div x-bind="tab('second')" class="wp-block-ska-condition"><!-- wp:paragraph -->
<p>Second</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition -->
<!-- wp:ska/condition {"skaBlocksAttributes":{"record":{"x-bind":"tab('third')"}}} -->
<div x-bind="tab('third')" class="wp-block-ska-condition"><!-- wp:paragraph -->
<p>Third</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition --></div>
<!-- /wp:ska/conditions --></div>
<!-- /wp:ska/element --><!-- wp:ska/element {"metadata":{"name":"Tabs"},"skaBlocks":{"cx":"[\u0026_.tablist]:flex [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:inline-flex [\u0026_.tablist]:items-stretch [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:px-6 [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:py-2.5 [\u0026_.tabpanels]:*:p-4 mx-auto [\u0026_.tablist]:[\u0026\u003eli]:-mb-[2px] space-y-5 max-w-3xl text-base [\u0026_.tabpanels]:*:rounded-sm [\u0026_.tablist]:border-b-2 [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:border-b-2 [\u0026_.tabpanels]:*:border [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:border-b-transparent [\u0026_.tablist]:[\u0026\u003eli]:[\u0026\u003ebutton]:[\u0026.active]:border-b-secondary [\u0026_.tabpanels]:*:shadow-lg","css":".\\[\\\u0026_\\.tablist\\]\\:flex .tablist{display:flex}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:inline-flex .tablist\u003eli\u003ebutton{display:inline-flex}.\\[\\\u0026_\\.tablist\\]\\:items-stretch .tablist{align-items:stretch}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:px-6 .tablist\u003eli\u003ebutton{padding-inline:var(\u002d\u002dspacing-6)}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:py-2\\.5 .tablist\u003eli\u003ebutton{padding-block:var(\u002d\u002dspacing-2_5)}:is(.\\[\\\u0026_\\.tabpanels\\]\\:\\*\\:p-4 .tabpanels\u003e*){padding:var(\u002d\u002dspacing-4)}.mx-auto{margin-inline:auto}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:-mb-\\[2px\\] .tablist\u003eli{margin-bottom:-2px}:where(.space-y-5\u003e:not(:last-child)){\u002d\u002dtw-space-y-reverse:0;margin-block-start:calc(var(\u002d\u002dspacing-5)*var(\u002d\u002dtw-space-y-reverse));margin-block-end:calc(var(\u002d\u002dspacing-5)*calc(1 - var(\u002d\u002dtw-space-y-reverse)))}.max-w-3xl{max-width:var(\u002d\u002dcontainer-3xl)}.text-base{font-size:var(\u002d\u002dtext-base);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-base\u002d\u002dline-height))}:is(.\\[\\\u0026_\\.tabpanels\\]\\:\\*\\:rounded-sm .tabpanels\u003e*){border-radius:var(\u002d\u002dradius-sm)}.\\[\\\u0026_\\.tablist\\]\\:border-b-2 .tablist{border-bottom-style:var(\u002d\u002dtw-border-style);border-bottom-width:2px}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:border-b-2 .tablist\u003eli\u003ebutton{border-bottom-style:var(\u002d\u002dtw-border-style);border-bottom-width:2px}:is(.\\[\\\u0026_\\.tabpanels\\]\\:\\*\\:border .tabpanels\u003e*){border-style:var(\u002d\u002dtw-border-style);border-width:1px}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:border-b-transparent .tablist\u003eli\u003ebutton{border-bottom-color:#0000}.\\[\\\u0026_\\.tablist\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\.active\\]\\:border-b-secondary .tablist\u003eli\u003ebutton.active{border-bottom-color:var(\u002d\u002dcolor-secondary)}:is(.\\[\\\u0026_\\.tabpanels\\]\\:\\*\\:shadow-lg .tabpanels\u003e*){\u002d\u002dtw-shadow:0 10px 15px -3px var(\u002d\u002dtw-shadow-color,#0000001a),0 4px 6px -4px var(\u002d\u002dtw-shadow-color,#0000001a);box-shadow:var(\u002d\u002dtw-inset-shadow),var(\u002d\u002dtw-inset-ring-shadow),var(\u002d\u002dtw-ring-offset-shadow),var(\u002d\u002dtw-ring-shadow),var(\u002d\u002dtw-shadow)}","t":1738813197},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaTabs({initialActive: 'first'})"}},"skaBlocksSelectors":{"[\u0026_.tablist]":{"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ebutton]":{"skaBlocksDisplay":{"v":{"$":{"@":"inline-flex"}}},"skaBlocksPadding":{"v":{"$":{"@":"","x":"6","y":"2.5"}},"t":"axis"},"skaBlocksBorderWidth":{"v":{"$":{"@":"","b":"2"}},"t":"sides"},"skaBlocksSelectors":{"[\u0026.active]":{"skaBlocksBorderColor":{"v":{"$":{"@":"","b":"secondary"}},"t":"sides"}}},"skaBlocksBorderColor":{"v":{"$":{"@":"","b":"transparent"}},"t":"sides"}}},"skaBlocksMargin":{"v":{"$":{"@":"","t":"","b":"-[2px]"}},"a":["[2px]"],"t":"sides"}}},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"stretch"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"","b":"2"}},"t":"sides"}},"[\u0026_.tabpanels]":{"skaBlocksSelectors":{"*":{"skaBlocksPadding":{"v":{"$":{"@":"4"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"lg"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"sm"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}}}}}},"skaBlocksMargin":{"v":{"$":{"@":"","x":"auto"}},"t":"axis"},"skaBlocksSpaceBetween":{"v":{"$":{"@":"","y":"5"}}},"skaBlocksMaxWidth":{"v":{"$":{"@":"3xl"}}},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}}} -->
<div x-data="skaTabs({initialActive: 'first'})" class="[&_.tablist]:flex [&_.tablist]:[&>li]:[&>button]:inline-flex [&_.tablist]:items-stretch [&_.tablist]:[&>li]:[&>button]:px-6 [&_.tablist]:[&>li]:[&>button]:py-2.5 [&_.tabpanels]:*:p-4 mx-auto [&_.tablist]:[&>li]:-mb-[2px] space-y-5 max-w-3xl text-base [&_.tabpanels]:*:rounded-sm [&_.tablist]:border-b-2 [&_.tablist]:[&>li]:[&>button]:border-b-2 [&_.tabpanels]:*:border [&_.tablist]:[&>li]:[&>button]:border-b-transparent [&_.tablist]:[&>li]:[&>button]:[&.active]:border-b-secondary [&_.tabpanels]:*:shadow-lg wp-block-ska-element"><!-- wp:ska/element {"skaBlocks":{"cx":"","css":"","t":1738813197},"skaBlocksAs":{"element":"ul"},"skaBlocksAttributes":{"record":{"x-bind":"tablist"}},"skaBlocksSelectors":[],"className":"tablist"} -->
<ul x-bind="tablist" class="wp-block-ska-element tablist"><!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"className":"active","skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('first')"}},"skaBlocks":{"cx":"","css":"","t":1738813197},"skaBlocksSelectors":[]} -->
<button x-bind="tabItem('first')" class="wp-block-ska-text ska-text active">Tab 1</button>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('second')"}}} -->
<button x-bind="tabItem('second')" class="wp-block-ska-text ska-text">Tab 2</button>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"li"}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('third')"}}} -->
<button x-bind="tabItem('third')" class="wp-block-ska-text ska-text">Tab 3</button>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element --></ul>
<!-- /wp:ska/element -->
<!-- wp:ska/conditions {"skaBlocks":{"cx":"","css":"","t":1738813197},"skaBlocksAttributes":{"record":[]},"className":"tabpanels"} -->
<div class="wp-block-ska-conditions tabpanels"><!-- wp:ska/condition {"skaBlocksAttributes":{"record":{"x-bind":"tab('first')"}}} -->
<div x-bind="tab('first')" class="wp-block-ska-condition"><!-- wp:paragraph -->
<p>First</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition -->
<!-- wp:ska/condition {"skaBlocksAttributes":{"record":{"x-bind":"tab('second')"}}} -->
<div x-bind="tab('second')" class="wp-block-ska-condition"><!-- wp:paragraph -->
<p>Second</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition -->
<!-- wp:ska/condition {"skaBlocksAttributes":{"record":{"x-bind":"tab('third')"}}} -->
<div x-bind="tab('third')" class="wp-block-ska-condition"><!-- wp:paragraph -->
<p>Third</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition --></div>
<!-- /wp:ska/conditions --></div>
<!-- /wp:ska/element -->