<div style="font-family:'Satoshi',sans-serif;">
<div style="display:flex;align-items:flex-end;border-bottom:2px solid var(--primary-light);gap:0;overflow-x:auto;">
<button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:0.875rem;font-weight:700;color:var(--primary-color);border-bottom:2px solid var(--primary-color);margin-bottom:-2px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color 0.15s;">
All Scripts
<span style="display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--primary-color);color:#fff;font-size:0.65rem;font-weight:700;">47</span>
</button>
<button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:0.875rem;font-weight:500;color:var(--paragraph);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color 0.15s;">
Drafts
<span style="display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5e7eb;color:var(--paragraph);font-size:0.65rem;font-weight:700;">12</span>
</button>
<button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:0.875rem;font-weight:500;color:var(--paragraph);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color 0.15s;">
Published
<span style="display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5e7eb;color:var(--paragraph);font-size:0.65rem;font-weight:700;">35</span>
</button>
</div>
<div style="padding:20px 0;color:var(--paragraph);font-size:0.875rem;">
Tab panel content appears here.
</div>
</div>
<div style="font-family:'Satoshi',sans-serif;">
{{! Tab bar }}
<div style="display:flex;align-items:flex-end;border-bottom:2px solid var(--primary-light);gap:0;overflow-x:auto;">
{{#each tabs}}
<button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:0.875rem;font-weight:{{#if this.active}}700{{else}}500{{/if}};color:{{#if this.active}}var(--primary-color){{else}}var(--paragraph){{/if}};border-bottom:2px solid {{#if this.active}}var(--primary-color){{else}}transparent{{/if}};margin-bottom:-2px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color 0.15s;">
{{this.label}}
{{#if this.count}}<span style="display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:{{#if this.active}}var(--primary-color){{else}}#e5e7eb{{/if}};color:{{#if this.active}}#fff{{else}}var(--paragraph){{/if}};font-size:0.65rem;font-weight:700;">{{this.count}}</span>{{/if}}
</button>
{{/each}}
</div>
{{! Tab content placeholder }}
<div style="padding:20px 0;color:var(--paragraph);font-size:0.875rem;">
{{activeContent}}
</div>
</div>
{
"tabs": [
{
"label": "All Scripts",
"active": true,
"count": 47
},
{
"label": "Drafts",
"active": false,
"count": 12
},
{
"label": "Published",
"active": false,
"count": 35
}
],
"activeContent": "Tab panel content appears here."
}
Horizontal tab navigation used within tool pages. Appears in: Script Generator (Script / Research / Notes tabs), Homerun Analysis, Channel Audit, Competitor Analysis, Video Report.