Tabs Builder

Add/rename up to 15 tabs. Data persists in localStorage. The last active tab is remembered using a cookie.

Tab Title

Tab Content (HTML allowed)

Output (copy & paste into Hello.html)

<!doctype html><html lang=en><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Tabs Output</title><body style="font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;color:#111827;background:#fff;padding:16px;"><h1 style="margin:0 0 8px 0;">Generated Tabs</h1><p style="color:#6b7280;margin:0 0 12px 0;">Inline CSS only</p><div role="tablist" aria-label="Tabs" id="tabbar"><button role="tab" aria-selected="true" data-index="0" style="border:1px solid #d1d5db;border-radius:10px;padding:6px 10px;background:#e5e7eb;margin:2px;">Tab 1</button></div><div id="panes"><div role="tabpanel"  style="padding:12px;border:1px solid #e5e7eb;border-radius:12px;margin-top:8px;">Hello from Tab 1</div></div><script>!function(){var b=document.getElementById('tabbar'),p=document.getElementById('panes').children,K='out_active_tab';function set(i){for(var x=0;x<b.children.length;x++){var el=b.children[x],sel=x===i;el.setAttribute('aria-selected',String(sel));el.setAttribute('style','border:1px solid #d1d5db;border-radius:10px;padding:6px 10px;background:'+(sel?'#e5e7eb':'transparent')+';margin:2px;');if(p[x])p[x].hidden=!sel}try{localStorage.setItem(K,String(i));}catch(e){}document.cookie='out_active_tab='+encodeURIComponent(String(i))+'; path=/; max-age='+(60*60*24*30);}b.addEventListener('click',function(e){var t=e.target;if(t&&t.tagName==='BUTTON'){set(parseInt(t.getAttribute('data-index')||'0'));}});var s=parseInt((function(){try{return localStorage.getItem(K);}catch(e){return '0';}})()||'0');!isNaN(s)&&s<p.length?set(s):set(0);}();</script></body></html>

Preview