Dynamic Tabs — Add, Close & Reorder Tabs (JS)

<div class="dt-window">
  <div class="dt-bar" id="dtBar">
    <div class="dt-tabs" id="dtTabs"></div>
    <button type="button" class="dt-add" id="dtAdd" aria-label="New tab">+</button>
  </div>
  <div class="dt-body" id="dtBody"></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.dt-window{width:100%;max-width:540px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.dt-bar{display:flex;align-items:center;background:#f1f5f9;padding:7px 7px 0;gap:3px}
.dt-tabs{display:flex;gap:3px;flex:1;overflow-x:auto;scrollbar-width:none}
.dt-tabs::-webkit-scrollbar{display:none}

.dt-tab{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#e2e8f0;border-radius:9px 9px 0 0;font-size:13px;font-weight:600;color:#64748b;cursor:pointer;white-space:nowrap;max-width:160px;flex-shrink:0;transition:background .15s,color .15s}
.dt-tab:hover{background:#e9eef5}
.dt-tab.dt-active{background:#fff;color:#0f172a}
.dt-tab-title{overflow:hidden;text-overflow:ellipsis}
.dt-close{width:18px;height:18px;border:none;background:none;color:#94a3b8;border-radius:50%;font-size:14px;line-height:1;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.dt-close:hover{background:#cbd5e1;color:#0f172a}

.dt-add{width:30px;height:30px;border:none;background:none;color:#64748b;font-size:19px;border-radius:8px;cursor:pointer;flex-shrink:0;align-self:center}
.dt-add:hover{background:#e2e8f0;color:#0f172a}

.dt-body{padding:26px;min-height:160px}
.dt-body h3{font-size:17px;font-weight:800;color:#0f172a;margin-bottom:8px}
.dt-body p{font-size:13.5px;color:#475569;line-height:1.6}
.dt-empty{color:#94a3b8;font-size:13.5px;text-align:center;padding:40px 0}

var tabsEl = document.getElementById('dtTabs');
var body = document.getElementById('dtBody');
var seq = 0;
var tabs = [];
var activeId = null;

function makeTab(title, content) {
  return { id: ++seq, title: title || ('Tab ' + (seq)), content: content || 'Content for ' + (title || 'this tab') + '.' };
}

function render() {
  tabsEl.innerHTML = tabs.map(function (t) {
    return '<div class="dt-tab ' + (t.id === activeId ? 'dt-active' : '') + '" data-id="' + t.id + '" draggable="true">' +
      '<span class="dt-tab-title">' + t.title + '</span>' +
      '<button class="dt-close" data-close="' + t.id + '" aria-label="Close tab">×</button></div>';
  }).join('');
  var active = tabs.find(function (t) { return t.id === activeId; });
  body.innerHTML = active
    ? '<h3>' + active.title + '</h3><p>' + active.content + '</p>'
    : '<p class="dt-empty">No tabs open. Click + to add one.</p>';
}

function addTab() {
  var t = makeTab();
  tabs.push(t);
  activeId = t.id;
  render();
  tabsEl.scrollLeft = tabsEl.scrollWidth;       // reveal the new tab
}

function closeTab(id) {
  var i = tabs.findIndex(function (t) { return t.id === id; });
  if (i < 0) return;
  tabs.splice(i, 1);
  // If we closed the active tab, activate its neighbour.
  if (activeId === id) {
    var next = tabs[i] || tabs[i - 1];
    activeId = next ? next.id : null;
  }
  render();
}

tabsEl.addEventListener('click', function (e) {
  var close = e.target.closest('.dt-close');
  if (close) { closeTab(+close.dataset.close); return; }
  var tab = e.target.closest('.dt-tab');
  if (tab) { activeId = +tab.dataset.id; render(); }
});

// Middle-click closes a tab, like a browser.
tabsEl.addEventListener('auxclick', function (e) {
  if (e.button !== 1) return;
  var tab = e.target.closest('.dt-tab');
  if (tab) { e.preventDefault(); closeTab(+tab.dataset.id); }
});

document.getElementById('dtAdd').addEventListener('click', addTab);

// Drag to reorder tabs.
var dragId = null;
tabsEl.addEventListener('dragstart', function (e) {
  var tab = e.target.closest('.dt-tab');
  if (tab) dragId = +tab.dataset.id;
});
tabsEl.addEventListener('dragover', function (e) {
  e.preventDefault();
  var over = e.target.closest('.dt-tab');
  if (!over || dragId == null || +over.dataset.id === dragId) return;
  var from = tabs.findIndex(function (t) { return t.id === dragId; });
  var to = tabs.findIndex(function (t) { return t.id === +over.dataset.id; });
  tabs.splice(to, 0, tabs.splice(from, 1)[0]);
  render();
});

// Seed a few tabs.
['Overview', 'Settings', 'Activity'].forEach(function (n) { tabs.push(makeTab(n)); });
activeId = tabs[0].id;
render();