1
2<div class="tabs-container">
3  <div class="tabs-header">
4        <div class="tab active" onclick="setActiveTab(0)">Tab 1</div>
5    <div class="tab" onclick="setActiveTab(1)">Tab 2</div>
6  </div>
7  <div class="tab-content">
8    Content for Tab 1
9  </div>
10</div>
11
12<script>
13function setActiveTab(index) {
14  const tabs = document.querySelectorAll('.tab');
15  const contents = document.querySelectorAll('.tab-content');
16  
17  tabs.forEach((tab, i) => {
18    if (i === index) {
19      tab.classList.add('active');
20      contents[i].style.display = 'block';
21    } else {
22      tab.classList.remove('active');
23      contents[i].style.display = 'none';
24    }
25  });
26}
27</script>
28

1
2.tabs-container {
3  display: flex;
4  flex-direction: column;
5}
6
7.tabs-header {
8  display: flex;
9  overflow-x: auto;
10}
11
12.tab {
13  background-color: #f3f4f6;
14  color: #374151;
15  font-size: 16px;
16  padding: 12px;
17  border-radius: 8px 8px 0 0;
18  cursor: pointer;
19  margin-right: 4px;
20}
21
22.tab.active {
23  background-color: #3b82f6;
24  color: #ffffff;
25}
26
27.tab-content {
28  background-color: #f3f4f6;
29  padding: 12px;
30  border-radius: 0 0 8px 8px;
31}
32