如何创建带有左对齐选项卡的TabControl面板？

<div id="tabContainer">
  <ul id="tabList">
    <li class="active">选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</li>
  </ul>
  <div id="tabContent">
    <div class="tabPanel active">
      这是选项卡1的内容。
    </div>
    <div class="tabPanel">
      这是选项卡2的内容。
    </div>
    <div class="tabPanel">
      这是选项卡3的内容。
    </div>
  </div>
</div>

#tabContainer {
  width: 100%;
}

#tabList {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

#tabList li {
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

#tabList li.active {
  background-color: #fff;
}

.tabPanel {
  display: none;
  padding: 10px;
}

.tabPanel.active {
  display: block;
}

var tabList = document.getElementById('tabList').getElementsByTagName('li');
var tabPanels = document.getElementsByClassName('tabPanel');

for (var i = 0; i < tabList.length; i++) {
  tabList[i].addEventListener('click', function() {
    // 移除所有选项卡的active类
    for (var j = 0; j < tabList.length; j++) {
      tabList[j].classList.remove('active');
    }
    // 隐藏所有选项卡内容
    for (var k = 0; k < tabPanels.length; k++) {
      tabPanels[k].classList.remove('active');
    }
    // 添加当前选项卡的active类
    this.classList.add('active');
    // 显示对应的选项卡内容
    var tabId = this.innerText.toLowerCase().replace(/\s/g, '');
    document.getElementById(tabId).classList.add('active');
  });
}