Tabs Generator — Moodle (inline CSS)

Up to 15 tabs. Editable titles & content. State stored in localStorage. Output is single-file HTML with inline CSS + vanilla JS.

Configure

3/15 tabs

Accent colourRemember last active tab (cookie)

Quick presets

Use + to add up to 15. Remove tabs with the (–) button on each editor.

Tab 1TitleContent (HTML allowed)

Tab 2TitleContent (HTML allowed)

Tab 3TitleContent (HTML allowed)

Output (copy or download)

Preview current

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tabs</title>
<body style="margin:20px;background:#0e1116;color:#e5e7eb;font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial">
  <h1 style="font:700 20px system-ui;margin:0 0 10px 0;color:#e5e7eb">Tabs</h1>
  <div role="tablist" aria-label="Tabs" style="display:flex;flex-wrap:wrap;align-items:center;gap:6px;--accent:#64748b">
    <button type="button" role="tab" id="t-0" aria-controls="t-0-p" aria-selected="false" tabindex="-1"
style="border:1px solid #334155;background:rgba(148,163,184,0.12);padding:10px 14px;margin:0 6px;border-radius:12px;cursor:pointer;font:600 14px system-ui,Segoe UI,Roboto,Helvetica,Arial;color:#e5e7eb;outline-offset:3px;">Overview</button><button type="button" role="tab" id="t-1" aria-controls="t-1-p" aria-selected="false" tabindex="-1"
style="border:1px solid #334155;background:rgba(148,163,184,0.12);padding:10px 14px;margin:0 6px;border-radius:12px;cursor:pointer;font:600 14px system-ui,Segoe UI,Roboto,Helvetica,Arial;color:#e5e7eb;outline-offset:3px;">Resources</button><button type="button" role="tab" id="t-2" aria-controls="t-2-p" aria-selected="false" tabindex="-1"
style="border:1px solid #334155;background:rgba(148,163,184,0.12);padding:10px 14px;margin:0 6px;border-radius:12px;cursor:pointer;font:600 14px system-ui,Segoe UI,Roboto,Helvetica,Arial;color:#e5e7eb;outline-offset:3px;">Assessments</button>
  </div>
  <div role="tabpanel" id="t-0-p" aria-labelledby="t-0" hidden
style="padding:14px;border:1px solid #e5e7eb;border-radius:14px;margin-top:10px;font:14px/1.6 system-ui,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#fff;">Welcome to the unit.</div><div role="tabpanel" id="t-1-p" aria-labelledby="t-1" hidden
style="padding:14px;border:1px solid #e5e7eb;border-radius:14px;margin-top:10px;font:14px/1.6 system-ui,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#fff;">Links and readings.</div><div role="tabpanel" id="t-2-p" aria-labelledby="t-2" hidden
style="padding:14px;border:1px solid #e5e7eb;border-radius:14px;margin-top:10px;font:14px/1.6 system-ui,Segoe UI,Roboto,Helvetica,Arial;color:#111;background:#fff;">All due dates here.</div>
<script>(function(){
  // Query helpers
  function qsa(s,r){return Array.prototype.slice.call((r||document).querySelectorAll(s));}
  // Simple cookie utils
  function setCookie(n,v,d){var t=new Date;t.setTime(t.getTime()+864e5*d);document.cookie=n+'='+encodeURIComponent(v)+';expires='+t.toUTCString()+';path=/'}
  function getCookie(n){var m=document.cookie.match(new RegExp('(?:^|; )'+n+'=([^;]*)'));return m?decodeURIComponent(m[1]):null}

  var tabs=qsa('[role="tab"]'), panels=qsa('[role="tabpanel"]');

  // Visual state for a tab button (selected vs not)
  function styleTab(el, selected){
    if(selected){
      el.style.backgroundColor='var(--accent)';
      el.style.color='#ffffff';
      el.style.borderColor='var(--accent)';
    }else{
      el.style.backgroundColor='rgba(148,163,184,0.12)';
      el.style.color='#e5e7eb';
      el.style.borderColor='#334155';
    }
  }

  // Activate a tab by index
  function activate(i, focus){
    tabs.forEach(function(t,idx){
      var sel = idx===i;
      t.setAttribute('aria-selected', sel?'true':'false');
      t.setAttribute('tabindex', sel?'0':'-1');
      styleTab(t, sel);
      var p=document.getElementById(t.id+'-p');
      if(p) p.hidden=!sel;
    });
    if(focus) tabs[i].focus();
  setCookie('last_active_tab_index', String(i), 90);
  }

  // Initial selection (optionally from cookie)
  var start=0;
  var sv=Number(getCookie('last_active_tab_index')); if(!isNaN(sv)&&sv>=0&&sv<tabs.length) start=sv;
  activate(start,false);

  // Mouse + keyboard bindings
  tabs.forEach(function(t,i){
    t.addEventListener('click', function(){ activate(i,false); });
    t.addEventListener('keydown', function(e){
      var k=e.key; if(['ArrowLeft','ArrowRight','Home','End'].indexOf(k)===-1) return;
      e.preventDefault();
      var idx=i; if(k==='ArrowLeft') idx=(i-1+tabs.length)%tabs.length;
      if(k==='ArrowRight') idx=(i+1)%tabs.length; if(k==='Home') idx=0; if(k==='End') idx=tabs.length-1;
      activate(idx,true);
    });
  });
})();</script>
</body></html>

Show 1 / 3 / 5 tab previews