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"},"skaBlocksMargin":{"v":{"$":{"@":"","x":"auto"}},"t":"axis"},"skaBlocksMaxWidth":{"v":{"$":{"@":"3xl"}}},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaTabs({initialActive: 'first'})"}},"skaBlocks":{"cx":"[\u0026_.tablist]:flex [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:inline-flex [\u0026_.tablist]:items-stretch [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:px-5 [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:py-2.5 *:[\u0026_.tabpanels]:p-5 mx-auto [\u0026_.tablist]:-mb-px max-w-3xl text-base [\u0026.active]:[\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:font-semibold [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:bg-white [\u0026_.tabpanels]:bg-white [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:rounded-t-md [\u0026_.tabpanels]:rounded-b-md [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:border [\u0026_.tabpanels]:border [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:border-transparent [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:border-b-site-border [\u0026.active]:[\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:border-site-border [\u0026.active]:[\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:border-b-transparent","t":1709756495,"css":".mx-auto{margin-left:auto;margin-right:auto}.max-w-3xl{max-width:50rem}.text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.\\[\\\u0026_\\.tablist\\]\\:-mb-px .tablist{margin-bottom:calc(var(\u002d\u002dska-spacing-px) * -1)}.\\[\\\u0026_\\.tablist\\]\\:flex .tablist{display:flex}.\\[\\\u0026_\\.tablist\\]\\:items-stretch .tablist{align-items:stretch}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:inline-flex .tablist\u003eli\u003ebutton{display:inline-flex}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:rounded-t-md .tablist\u003eli\u003ebutton{border-top-left-radius:var(\u002d\u002dska-border-radius-md);border-top-right-radius:var(\u002d\u002dska-border-radius-md)}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:border .tablist\u003eli\u003ebutton{border-width:1px}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:border-transparent .tablist\u003eli\u003ebutton{border-color:transparent}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:border-b-site-border .tablist\u003eli\u003ebutton{\u002d\u002dtw-border-opacity:1;border-bottom-color:rgba(var(\u002d\u002dska-rgb-site-border),1)}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:bg-white .tablist\u003eli\u003ebutton{\u002d\u002dtw-bg-opacity:1;background-color:rgba(var(\u002d\u002dska-rgb-white),1)}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:px-5 .tablist\u003eli\u003ebutton{padding-left:var(\u002d\u002dska-spacing-5);padding-right:var(\u002d\u002dska-spacing-5)}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:py-2\\.5 .tablist\u003eli\u003ebutton{padding-top:var(\u002d\u002dska-spacing-2\\.5);padding-bottom:var(\u002d\u002dska-spacing-2\\.5)}.\\[\\\u0026\\.active\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:border-site-border .tablist\u003eli\u003ebutton.active{\u002d\u002dtw-border-opacity:1;border-color:rgba(var(\u002d\u002dska-rgb-site-border),1)}.\\[\\\u0026\\.active\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:border-b-transparent .tablist\u003eli\u003ebutton.active{border-bottom-color:transparent}.\\[\\\u0026\\.active\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:font-semibold .tablist\u003eli\u003ebutton.active{font-weight:var(\u002d\u002dska-font-weight-semibold)}.\\[\\\u0026_\\.tabpanels\\]\\:rounded-b-md .tabpanels{border-bottom-right-radius:var(\u002d\u002dska-border-radius-md);border-bottom-left-radius:var(\u002d\u002dska-border-radius-md)}.\\[\\\u0026_\\.tabpanels\\]\\:border .tabpanels{border-width:1px}.\\[\\\u0026_\\.tabpanels\\]\\:bg-white .tabpanels{\u002d\u002dtw-bg-opacity:1;background-color:rgba(var(\u002d\u002dska-rgb-white),1)}.\\*\\:\\[\\\u0026_\\.tabpanels\\]\\:p-5 .tabpanels \u003e *{padding:var(\u002d\u002dska-spacing-5)}"},"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"}}}}}}}} -->
<div x-data="skaTabs({initialActive: 'first'})" class="[&_.tablist]:flex [&>button]:[&>li]:[&_.tablist]:inline-flex [&_.tablist]:items-stretch [&>button]:[&>li]:[&_.tablist]:px-5 [&>button]:[&>li]:[&_.tablist]:py-2.5 *:[&_.tabpanels]:p-5 mx-auto [&_.tablist]:-mb-px max-w-3xl text-base [&.active]:[&>button]:[&>li]:[&_.tablist]:font-semibold [&>button]:[&>li]:[&_.tablist]:bg-white [&_.tabpanels]:bg-white [&>button]:[&>li]:[&_.tablist]:rounded-t-md [&_.tabpanels]:rounded-b-md [&>button]:[&>li]:[&_.tablist]:border [&_.tabpanels]:border [&>button]:[&>li]:[&_.tablist]:border-transparent [&>button]:[&>li]:[&_.tablist]:border-b-site-border [&.active]:[&>button]:[&>li]:[&_.tablist]:border-site-border [&.active]:[&>button]:[&>li]:[&_.tablist]:border-b-transparent wp-block-ska-element"><!-- wp:ska/element {"className":"tablist","skaBlocksAs":{"element":"ul"},"skaBlocksAttributes":{"record":{"x-bind":"tablist"}},"skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksSelectors":[]} -->
<ul x-bind="tablist" class="wp-block-ska-element tablist"><!-- wp:ska/element {"skaBlocksAs":{"element":"li"},"skaBlocks":{"cx":"","t":0}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"className":"active","skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('first')"}},"skaBlocks":{"cx":"","t":1709756495,"css":""},"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"},"skaBlocks":{"cx":"","t":0}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('second')"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<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"},"skaBlocks":{"cx":"","t":0}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('third')"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<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 {"className":"tabpanels","skaBlocksAttributes":{"record":[]},"skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<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 {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<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 {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<p>Third</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition --></div>
<!-- /wp:ska/conditions --></div>
<!-- /wp:ska/element --><!-- wp:ska/element {"metadata":{"name":"Tabs"},"skaBlocksMargin":{"v":{"$":{"@":"","x":"auto"}},"t":"axis"},"skaBlocksSpaceBetween":{"v":{"$":{"@":"","y":"2"}}},"skaBlocksMaxWidth":{"v":{"$":{"@":"3xl"}}},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaTabs({initialActive: 'second'})"}},"skaBlocks":{"cx":"[\u0026_.tablist]:flex [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:inline-flex [\u0026_.tablist]:gap-2 [\u0026_.tablist]:items-stretch [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:px-4 [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:py-1.5 *:[\u0026_.tabpanels]:p-4 mx-auto space-y-2 max-w-3xl text-base [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:bg-white hover:[\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:bg-neutral-50 [\u0026.active]:[\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:bg-neutral-100 [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:rounded *:[\u0026_.tabpanels]:rounded *:[\u0026_.tabpanels]:border *:[\u0026_.tabpanels]:shadow [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:transition-colors","t":1709756495,"css":".mx-auto{margin-left:auto;margin-right:auto}.max-w-3xl{max-width:50rem}.space-y-2 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-2) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-2) * var(\u002d\u002dtw-space-y-reverse))}.text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.\\[\\\u0026_\\.tablist\\]\\:flex .tablist{display:flex}.\\[\\\u0026_\\.tablist\\]\\:items-stretch .tablist{align-items:stretch}.\\[\\\u0026_\\.tablist\\]\\:gap-2 .tablist{gap:var(\u002d\u002dska-spacing-2)}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:inline-flex .tablist\u003eli\u003ebutton{display:inline-flex}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:rounded .tablist\u003eli\u003ebutton{border-radius:var(\u002d\u002dska-border-radius)}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:bg-white .tablist\u003eli\u003ebutton{\u002d\u002dtw-bg-opacity:1;background-color:rgba(var(\u002d\u002dska-rgb-white),1)}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:px-4 .tablist\u003eli\u003ebutton{padding-left:var(\u002d\u002dska-spacing-4);padding-right:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:py-1\\.5 .tablist\u003eli\u003ebutton{padding-top:var(\u002d\u002dska-spacing-1\\.5);padding-bottom:var(\u002d\u002dska-spacing-1\\.5)}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:transition-colors .tablist\u003eli\u003ebutton{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.hover\\:\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:bg-neutral-50 .tablist\u003eli\u003ebutton:hover{\u002d\u002dtw-bg-opacity:1;background-color:rgba(250,250,250,1)}.\\[\\\u0026\\.active\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:bg-neutral-100 .tablist\u003eli\u003ebutton.active{\u002d\u002dtw-bg-opacity:1;background-color:rgba(245,245,245,1)}.\\*\\:\\[\\\u0026_\\.tabpanels\\]\\:rounded .tabpanels \u003e *{border-radius:var(\u002d\u002dska-border-radius)}.\\*\\:\\[\\\u0026_\\.tabpanels\\]\\:border .tabpanels \u003e *{border-width:1px}.\\*\\:\\[\\\u0026_\\.tabpanels\\]\\:p-4 .tabpanels \u003e *{padding:var(\u002d\u002dska-spacing-4)}.\\*\\:\\[\\\u0026_\\.tabpanels\\]\\:shadow .tabpanels \u003e *{\u002d\u002dtw-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);\u002d\u002dtw-shadow-colored:0 1px 3px 0 var(\u002d\u002dtw-shadow-color),0 1px 2px -1px var(\u002d\u002dtw-shadow-color);box-shadow:var(\u002d\u002dtw-ring-offset-shadow,0 0 #0000),var(\u002d\u002dtw-ring-shadow,0 0 #0000),var(\u002d\u002dtw-shadow)}"},"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"}}}}}}}} -->
<div x-data="skaTabs({initialActive: 'second'})" class="[&_.tablist]:flex [&>button]:[&>li]:[&_.tablist]:inline-flex [&_.tablist]:gap-2 [&_.tablist]:items-stretch [&>button]:[&>li]:[&_.tablist]:px-4 [&>button]:[&>li]:[&_.tablist]:py-1.5 *:[&_.tabpanels]:p-4 mx-auto space-y-2 max-w-3xl text-base [&>button]:[&>li]:[&_.tablist]:bg-white hover:[&>button]:[&>li]:[&_.tablist]:bg-neutral-50 [&.active]:[&>button]:[&>li]:[&_.tablist]:bg-neutral-100 [&>button]:[&>li]:[&_.tablist]:rounded *:[&_.tabpanels]:rounded *:[&_.tabpanels]:border *:[&_.tabpanels]:shadow [&>button]:[&>li]:[&_.tablist]:transition-colors wp-block-ska-element"><!-- wp:ska/element {"className":"tablist","skaBlocksAs":{"element":"ul"},"skaBlocksAttributes":{"record":{"x-bind":"tablist"}},"skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksSelectors":[]} -->
<ul x-bind="tablist" class="wp-block-ska-element tablist"><!-- wp:ska/element {"skaBlocksAs":{"element":"li"},"skaBlocks":{"cx":"","t":0}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"className":"active","skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('first')"}},"skaBlocks":{"cx":"","t":1709756495,"css":""},"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"},"skaBlocks":{"cx":"","t":0}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('second')"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<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"},"skaBlocks":{"cx":"","t":0}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('third')"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<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 {"className":"tabpanels","skaBlocksAttributes":{"record":[]},"skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<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 {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<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 {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<p>Third</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition --></div>
<!-- /wp:ska/conditions --></div>
<!-- /wp:ska/element --><!-- wp:ska/element {"metadata":{"name":"Tabs"},"skaBlocksMargin":{"v":{"$":{"@":"","x":"auto"}},"t":"axis"},"skaBlocksSpaceBetween":{"v":{"$":{"@":"","y":"5"}}},"skaBlocksMaxWidth":{"v":{"$":{"@":"3xl"}}},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaTabs({initialActive: 'first'})"}},"skaBlocks":{"cx":"[\u0026_.tablist]:flex [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:inline-flex [\u0026_.tablist]:items-stretch [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:px-6 [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:py-2.5 *:[\u0026_.tabpanels]:p-4 mx-auto [\u0026\u003eli]:[\u0026_.tablist]:-mb-[2px] space-y-5 max-w-3xl text-base *:[\u0026_.tabpanels]:rounded-sm [\u0026_.tablist]:border-b-2 [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:border-b-2 *:[\u0026_.tabpanels]:border [\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:border-b-transparent [\u0026.active]:[\u0026\u003ebutton]:[\u0026\u003eli]:[\u0026_.tablist]:border-b-secondary *:[\u0026_.tabpanels]:shadow-lg","t":1709756495,"css":".mx-auto{margin-left:auto;margin-right:auto}.max-w-3xl{max-width:50rem}.space-y-5 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-5) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-5) * var(\u002d\u002dtw-space-y-reverse))}.text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.\\[\\\u0026_\\.tablist\\]\\:flex .tablist{display:flex}.\\[\\\u0026_\\.tablist\\]\\:items-stretch .tablist{align-items:stretch}.\\[\\\u0026_\\.tablist\\]\\:border-b-2 .tablist{border-bottom-width:2px}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:-mb-\\[2px\\] .tablist\u003eli{margin-bottom:-2px}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:inline-flex .tablist\u003eli\u003ebutton{display:inline-flex}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:border-b-2 .tablist\u003eli\u003ebutton{border-bottom-width:2px}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:border-b-transparent .tablist\u003eli\u003ebutton{border-bottom-color:transparent}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:px-6 .tablist\u003eli\u003ebutton{padding-left:var(\u002d\u002dska-spacing-6);padding-right:var(\u002d\u002dska-spacing-6)}.\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:py-2\\.5 .tablist\u003eli\u003ebutton{padding-top:var(\u002d\u002dska-spacing-2\\.5);padding-bottom:var(\u002d\u002dska-spacing-2\\.5)}.\\[\\\u0026\\.active\\]\\:\\[\\\u0026\\\u003ebutton\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026_\\.tablist\\]\\:border-b-secondary .tablist\u003eli\u003ebutton.active{\u002d\u002dtw-border-opacity:1;border-bottom-color:rgba(var(\u002d\u002dska-rgb-secondary),1)}.\\*\\:\\[\\\u0026_\\.tabpanels\\]\\:rounded-sm .tabpanels \u003e *{border-radius:var(\u002d\u002dska-border-radius-sm)}.\\*\\:\\[\\\u0026_\\.tabpanels\\]\\:border .tabpanels \u003e *{border-width:1px}.\\*\\:\\[\\\u0026_\\.tabpanels\\]\\:p-4 .tabpanels \u003e *{padding:var(\u002d\u002dska-spacing-4)}.\\*\\:\\[\\\u0026_\\.tabpanels\\]\\:shadow-lg .tabpanels \u003e *{\u002d\u002dtw-shadow:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);\u002d\u002dtw-shadow-colored:0 10px 15px -3px var(\u002d\u002dtw-shadow-color),0 4px 6px -4px var(\u002d\u002dtw-shadow-color);box-shadow:var(\u002d\u002dtw-ring-offset-shadow,0 0 #0000),var(\u002d\u002dtw-ring-shadow,0 0 #0000),var(\u002d\u002dtw-shadow)}"},"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"}}}}}}}} -->
<div x-data="skaTabs({initialActive: 'first'})" class="[&_.tablist]:flex [&>button]:[&>li]:[&_.tablist]:inline-flex [&_.tablist]:items-stretch [&>button]:[&>li]:[&_.tablist]:px-6 [&>button]:[&>li]:[&_.tablist]:py-2.5 *:[&_.tabpanels]:p-4 mx-auto [&>li]:[&_.tablist]:-mb-[2px] space-y-5 max-w-3xl text-base *:[&_.tabpanels]:rounded-sm [&_.tablist]:border-b-2 [&>button]:[&>li]:[&_.tablist]:border-b-2 *:[&_.tabpanels]:border [&>button]:[&>li]:[&_.tablist]:border-b-transparent [&.active]:[&>button]:[&>li]:[&_.tablist]:border-b-secondary *:[&_.tabpanels]:shadow-lg wp-block-ska-element"><!-- wp:ska/element {"className":"tablist","skaBlocksAs":{"element":"ul"},"skaBlocksAttributes":{"record":{"x-bind":"tablist"}},"skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksSelectors":[]} -->
<ul x-bind="tablist" class="wp-block-ska-element tablist"><!-- wp:ska/element {"skaBlocksAs":{"element":"li"},"skaBlocks":{"cx":"","t":0}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"className":"active","skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('first')"}},"skaBlocks":{"cx":"","t":1709756495,"css":""},"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"},"skaBlocks":{"cx":"","t":0}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('second')"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<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"},"skaBlocks":{"cx":"","t":0}} -->
<li class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"tabItem('third')"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<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 {"className":"tabpanels","skaBlocksAttributes":{"record":[]},"skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<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 {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<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 {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<p>Third</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/condition --></div>
<!-- /wp:ska/conditions --></div>
<!-- /wp:ska/element -->