BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<div class="p-4 space-y-8">
  <h3 class="text-lg font-semibold mb-4">All Sizes</h3>
  <div class="mb-6">
    <p class="text-sm font-medium text-grayscale-500 mb-2 uppercase">xs</p>
    <div class="bui-tabs" id="tabs-c228fe48" data-controller="better-ui--tabs--container" data-better-ui--tabs--container-mode-value="js" data-better-ui--tabs--container-persist-value="false" data-better-ui--tabs--container-show-loading-value="false" data-better-ui--tabs--container-loader-delay-value="1000">
      <div role="tablist"
       aria-label="Tabs"
       class="bui-tabs__list flex flex-row justify-start border-b border-grayscale-200 ">
        <button id="tabs-c228fe48-tab-xs-tab1" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-2 py-1 text-xs border-b-2 border-primary-600 text-primary-600 cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-c228fe48-panel-xs-tab1" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="xs-tab1" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab One</span>
        </button>
        <button id="tabs-c228fe48-tab-xs-tab2" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-2 py-1 text-xs border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-c228fe48-panel-xs-tab2" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="xs-tab2" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab Two</span>
        </button>
        <button id="tabs-c228fe48-tab-xs-tab3" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-2 py-1 text-xs border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-c228fe48-panel-xs-tab3" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="xs-tab3" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab Three</span>
        </button>
      </div>
      <div class="bui-tabs__panels flex-1 ">
        <div id="tabs-c228fe48-panel-xs-tab1" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-c228fe48-tab-xs-tab1" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="xs-tab1">
          <div class="p-3 text-sm text-grayscale-600">Content for size xs</div>
        </div>
        <div id="tabs-c228fe48-panel-xs-tab2" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-c228fe48-tab-xs-tab2" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="xs-tab2">
          <div class="p-3 text-sm text-grayscale-600">Tab Two content</div>
        </div>
        <div id="tabs-c228fe48-panel-xs-tab3" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-c228fe48-tab-xs-tab3" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="xs-tab3">
          <div class="p-3 text-sm text-grayscale-600">Tab Three content</div>
        </div>
      </div>
    </div>
  </div>
  <div class="mb-6">
    <p class="text-sm font-medium text-grayscale-500 mb-2 uppercase">sm</p>
    <div class="bui-tabs" id="tabs-4c34c271" data-controller="better-ui--tabs--container" data-better-ui--tabs--container-mode-value="js" data-better-ui--tabs--container-persist-value="false" data-better-ui--tabs--container-show-loading-value="false" data-better-ui--tabs--container-loader-delay-value="1000">
      <div role="tablist"
       aria-label="Tabs"
       class="bui-tabs__list flex flex-row justify-start border-b border-grayscale-200 ">
        <button id="tabs-4c34c271-tab-sm-tab1" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-3 py-1.5 text-sm border-b-2 border-primary-600 text-primary-600 cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-4c34c271-panel-sm-tab1" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="sm-tab1" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab One</span>
        </button>
        <button id="tabs-4c34c271-tab-sm-tab2" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-3 py-1.5 text-sm border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-4c34c271-panel-sm-tab2" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="sm-tab2" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab Two</span>
        </button>
        <button id="tabs-4c34c271-tab-sm-tab3" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-3 py-1.5 text-sm border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-4c34c271-panel-sm-tab3" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="sm-tab3" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab Three</span>
        </button>
      </div>
      <div class="bui-tabs__panels flex-1 ">
        <div id="tabs-4c34c271-panel-sm-tab1" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-4c34c271-tab-sm-tab1" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="sm-tab1">
          <div class="p-3 text-sm text-grayscale-600">Content for size sm</div>
        </div>
        <div id="tabs-4c34c271-panel-sm-tab2" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-4c34c271-tab-sm-tab2" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="sm-tab2">
          <div class="p-3 text-sm text-grayscale-600">Tab Two content</div>
        </div>
        <div id="tabs-4c34c271-panel-sm-tab3" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-4c34c271-tab-sm-tab3" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="sm-tab3">
          <div class="p-3 text-sm text-grayscale-600">Tab Three content</div>
        </div>
      </div>
    </div>
  </div>
  <div class="mb-6">
    <p class="text-sm font-medium text-grayscale-500 mb-2 uppercase">md</p>
    <div class="bui-tabs" id="tabs-7363c6bc" data-controller="better-ui--tabs--container" data-better-ui--tabs--container-mode-value="js" data-better-ui--tabs--container-persist-value="false" data-better-ui--tabs--container-show-loading-value="false" data-better-ui--tabs--container-loader-delay-value="1000">
      <div role="tablist"
       aria-label="Tabs"
       class="bui-tabs__list flex flex-row justify-start border-b border-grayscale-200 ">
        <button id="tabs-7363c6bc-tab-md-tab1" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-4 py-2 text-sm border-b-2 border-primary-600 text-primary-600 cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-7363c6bc-panel-md-tab1" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="md-tab1" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab One</span>
        </button>
        <button id="tabs-7363c6bc-tab-md-tab2" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-4 py-2 text-sm border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-7363c6bc-panel-md-tab2" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="md-tab2" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab Two</span>
        </button>
        <button id="tabs-7363c6bc-tab-md-tab3" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-4 py-2 text-sm border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-7363c6bc-panel-md-tab3" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="md-tab3" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab Three</span>
        </button>
      </div>
      <div class="bui-tabs__panels flex-1 ">
        <div id="tabs-7363c6bc-panel-md-tab1" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-7363c6bc-tab-md-tab1" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="md-tab1">
          <div class="p-3 text-sm text-grayscale-600">Content for size md</div>
        </div>
        <div id="tabs-7363c6bc-panel-md-tab2" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-7363c6bc-tab-md-tab2" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="md-tab2">
          <div class="p-3 text-sm text-grayscale-600">Tab Two content</div>
        </div>
        <div id="tabs-7363c6bc-panel-md-tab3" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-7363c6bc-tab-md-tab3" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="md-tab3">
          <div class="p-3 text-sm text-grayscale-600">Tab Three content</div>
        </div>
      </div>
    </div>
  </div>
  <div class="mb-6">
    <p class="text-sm font-medium text-grayscale-500 mb-2 uppercase">lg</p>
    <div class="bui-tabs" id="tabs-9b8d9c87" data-controller="better-ui--tabs--container" data-better-ui--tabs--container-mode-value="js" data-better-ui--tabs--container-persist-value="false" data-better-ui--tabs--container-show-loading-value="false" data-better-ui--tabs--container-loader-delay-value="1000">
      <div role="tablist"
       aria-label="Tabs"
       class="bui-tabs__list flex flex-row justify-start border-b border-grayscale-200 ">
        <button id="tabs-9b8d9c87-tab-lg-tab1" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-5 py-2.5 text-base border-b-2 border-primary-600 text-primary-600 cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-9b8d9c87-panel-lg-tab1" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="lg-tab1" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab One</span>
        </button>
        <button id="tabs-9b8d9c87-tab-lg-tab2" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-5 py-2.5 text-base border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-9b8d9c87-panel-lg-tab2" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="lg-tab2" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab Two</span>
        </button>
        <button id="tabs-9b8d9c87-tab-lg-tab3" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-5 py-2.5 text-base border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-9b8d9c87-panel-lg-tab3" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="lg-tab3" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab Three</span>
        </button>
      </div>
      <div class="bui-tabs__panels flex-1 ">
        <div id="tabs-9b8d9c87-panel-lg-tab1" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-9b8d9c87-tab-lg-tab1" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="lg-tab1">
          <div class="p-3 text-sm text-grayscale-600">Content for size lg</div>
        </div>
        <div id="tabs-9b8d9c87-panel-lg-tab2" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-9b8d9c87-tab-lg-tab2" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="lg-tab2">
          <div class="p-3 text-sm text-grayscale-600">Tab Two content</div>
        </div>
        <div id="tabs-9b8d9c87-panel-lg-tab3" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-9b8d9c87-tab-lg-tab3" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="lg-tab3">
          <div class="p-3 text-sm text-grayscale-600">Tab Three content</div>
        </div>
      </div>
    </div>
  </div>
  <div class="mb-6">
    <p class="text-sm font-medium text-grayscale-500 mb-2 uppercase">xl</p>
    <div class="bui-tabs" id="tabs-d41c498f" data-controller="better-ui--tabs--container" data-better-ui--tabs--container-mode-value="js" data-better-ui--tabs--container-persist-value="false" data-better-ui--tabs--container-show-loading-value="false" data-better-ui--tabs--container-loader-delay-value="1000">
      <div role="tablist"
       aria-label="Tabs"
       class="bui-tabs__list flex flex-row justify-start border-b border-grayscale-200 ">
        <button id="tabs-d41c498f-tab-xl-tab1" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-6 py-3 text-lg border-b-2 border-primary-600 text-primary-600 cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-d41c498f-panel-xl-tab1" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="xl-tab1" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab One</span>
        </button>
        <button id="tabs-d41c498f-tab-xl-tab2" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-6 py-3 text-lg border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-d41c498f-panel-xl-tab2" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="xl-tab2" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab Two</span>
        </button>
        <button id="tabs-d41c498f-tab-xl-tab3" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-6 py-3 text-lg border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-d41c498f-panel-xl-tab3" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="xl-tab3" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
          <span class="bui-tabs__tab-label">Tab Three</span>
        </button>
      </div>
      <div class="bui-tabs__panels flex-1 ">
        <div id="tabs-d41c498f-panel-xl-tab1" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-d41c498f-tab-xl-tab1" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="xl-tab1">
          <div class="p-3 text-sm text-grayscale-600">Content for size xl</div>
        </div>
        <div id="tabs-d41c498f-panel-xl-tab2" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-d41c498f-tab-xl-tab2" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="xl-tab2">
          <div class="p-3 text-sm text-grayscale-600">Tab Two content</div>
        </div>
        <div id="tabs-d41c498f-panel-xl-tab3" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-d41c498f-tab-xl-tab3" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="xl-tab3">
          <div class="p-3 text-sm text-grayscale-600">Tab Three content</div>
        </div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="p-4 space-y-8">
  <h3 class="text-lg font-semibold mb-4">All Sizes</h3>
  <% %i[xs sm md lg xl].each do |size| %>
    <div class="mb-6">
      <p class="text-sm font-medium text-grayscale-500 mb-2 uppercase"><%= size %></p>
      <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :underline, size: size) do |tabs| %>
        <% tabs.with_tab(id: "#{size}-tab1", label: "Tab One", active: true) %>
        <% tabs.with_tab(id: "#{size}-tab2", label: "Tab Two") %>
        <% tabs.with_tab(id: "#{size}-tab3", label: "Tab Three") %>
        <% tabs.with_panel(id: "#{size}-tab1", active: true) do %>
          <div class="p-3 text-sm text-grayscale-600">Content for size <%= size %></div>
        <% end %>
        <% tabs.with_panel(id: "#{size}-tab2") do %>
          <div class="p-3 text-sm text-grayscale-600">Tab Two content</div>
        <% end %>
        <% tabs.with_panel(id: "#{size}-tab3") do %>
          <div class="p-3 text-sm text-grayscale-600">Tab Three content</div>
        <% end %>
      <% end %>
    </div>
  <% end %>
</div>

No notes provided.

No params configured.