Set width: full 320 480 640 768 1024 1920 custom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Tabs</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 2rem; background: #f7f7f7; }
.tabs {
position: relative;
max-width: 600px;
margin: 0 auto;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.07);
padding: 1.5rem;
}
.tab-list {
display: flex;
border-bottom: 2px solid #eee;
margin-bottom: 1rem;
gap: 0.5rem;
flex-wrap: wrap;
}
.tab {
background: none;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
cursor: pointer;
border-radius: 6px 6px 0 0;
color: #555;
transition: background 0.2s, color 0.2s;
}
.tab.active {
background: #444;
color: #fff;
font-weight: bold;
}
.tab-content {
display: none;
padding: 1rem 0 0 0;
color: #333;
}
.tab-content.active { display: block; }
.hamburger {
display: none;
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
margin-bottom: 0.5rem;
color: #444;
}
@media (max-width: 600px) {
.tabs { padding: 1rem; }
.hamburger { display: block; }
.tab-list {
flex-direction: column;
gap: 0;
display: none;
}
.tab-list {
position: absolute;
background: #fff;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.tab-list.open {
display: flex;
}
.tab { border-radius: 6px 6px 0 0; width: 100%; text-align: left; }
}
</style>
</head>
<body>
<div class="tabs">
<button class="hamburger" id="tabsHamburger" aria-label="Show tabs">☰</button>
<div class="tab-list" id="tabList">
<button class="tab active" data-tab="tab1">Tab 1</button>
<button class="tab" data-tab="tab2">Tab 2</button>
<button class="tab" data-tab="tab3">Tab 3</button>
</div>
<div class="tab-content active" id="tab1">
<h2>Tab 1 Content</h2>
<p>This is the content for Tab 1. You can put any HTML here.</p>
</div>
<div class="tab-content" id="tab2">
<h2>Tab 2 Content</h2>
<p>This is the content for Tab 2. Responsive and easy to use!</p>
</div>
<div class="tab-content" id="tab3">
<h2>Tab 3 Content</h2>
<p>This is the content for Tab 3. Add as many tabs as you like.</p>
</div>
</div>
<script>
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');
const hamburger = document.getElementById('tabsHamburger');
const tabList = document.getElementById('tabList');
function closeTabListOnSelect() {
if (window.innerWidth <= 600) {
tabList.classList.remove('open');
}
}
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
contents.forEach(c => c.classList.remove('active'));
tab.classList.add('active');
document.getElementById(tab.dataset.tab).classList.add('active');
closeTabListOnSelect();
});
});
hamburger.addEventListener('click', () => {
tabList.classList.toggle('open');
});
window.addEventListener('resize', () => {
if (window.innerWidth > 600) {
tabList.classList.remove('open');
}
});
</script>
</body>
</html>