Tabs are a powerful UI pattern used to organize content into manageable sections. Whether you’re building a dashboard, a blog layout, or a product showcase, custom tabs offer a clean and interactive way to present information. In this tutorial, we’ll walk through how to create custom tabs using CSS and JavaScript—from structure to styling to interactivity.
🔧 What You’ll Learn
- How to structure tab components using HTML
- How to style tabs with CSS for a clean UI
- How to add interactivity using JavaScript
- How to make tabs responsive and accessible
📄 HTML Structure
We start by creating the basic layout for our tab component. Each tab button is linked to a corresponding content block using data attributes.
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div class="tab-container">
<div class="tabs">
<button type="button" class="active tab-btn" data="tab1">Tab 1</button>
<button type="button" class="tab-btn" data="tab2">Tab 2</button>
<button type="button" class="tab-btn" data="tab3">Tab 3</button>
<button type="button" class="tab-btn" data="tab4">Tab 4</button>
</div>
<div class="tab-content active" data-content="tab1">
<h4>Tab 1 Content</h4>
<p>Lorem Ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</div>
<div class="tab-content" data-content="tab2">
<h4>Tab 2 Content</h4>
<p>There are many variations of passages...</p>
<p>There are many variations of passages...</p>
</div>
<div class="tab-content" data-content="tab3">
<h4>Tab 3 Content</h4>
<p>It is a long established fact...</p>
<p>It is a long established fact...</p>
</div>
<div class="tab-content" data-content="tab4">
<h4>Tab 4 Content</h4>
<p>Lorem Ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</div>
</div>
🎨 CSS Styling
Next, we style the tabs and content blocks. We use flexbox for layout, transitions for smooth interaction, and active classes to highlight the selected tab.
body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.tab-container {
width: 450px;
max-width: 100%;
padding: 10px;
box-shadow: 0px 0px 10px #0000000d;
border-radius: 10px;
}
.tabs {
display: flex;
column-gap: 20px;
margin-bottom: 30px;
}
.tabs button {
width: 100%;
background: #e1e1e1;
color: #000;
border: none;
padding: 10px 10px;
cursor: pointer;
border-bottom: 3px solid #e1e1e1;
}
.tabs button:hover {
border-color: #363636;
}
.tabs button.active {
background: #000;
color: #fff;
border-color: #000;
}
.tab-content h4 {
margin: 0 0 0 0;
}
.tab-content p {
line-height: 23px;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
⚙️ JavaScript Interactivity
We use JavaScript to toggle the active tab and display the corresponding content. This is done by adding/removing classes based on the clicked button’s data attribute.
var tabs = document.getElementsByClassName("tab-btn");
var content = document.getElementsByClassName("tab-content");
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", function (e) {
for(var j = 0; j < tabs.length; j++){
tabs[j].classList.remove("active");
content[j].classList.remove("active");
}
var targetContent = e.target.getAttribute("data");
e.target.classList.add("active");
document.querySelector("[data-content='"+targetContent+"']").classList.add("active");
});
}
📚 Brief Overview of HTML, CSS, and JS
HTML provides the structure of the tabs. Each button and content block is defined using semantic tags and attributes.
CSS handles the visual styling—colors, spacing, layout, and transitions. It ensures the tabs look clean and responsive.
JavaScript adds interactivity. It listens for click events and dynamically updates the UI based on user interaction.
📱 Responsive Design Tips
To make your tabs mobile-friendly, consider stacking buttons vertically on smaller screens using media queries. You can also add swipe gestures for touch devices.
0 comments