Tabs in CSS
Menu
Tabs in CSS
Tabs in CSS are a common UI element used in web design to organize content into separate sections. Here’s an example of how to create a simple tabbed interface using CSS:
HTML:
<div class="tab-container">
<div class="tab-menu">
<a href="#tab1" class="active">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>
</div>
<div class="tab-content">
<div id="tab1" class="active">
<p>Tab 1 content goes here.</p>
</div>
<div id="tab2">
<p>Tab 2 content goes here.</p>
</div>
<div id="tab3">
<p>Tab 3 content goes here.</p>
</div>
</div>
</div>
CSS:
.tab-menu {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.tab-menu a {
text-decoration: none;
color: #333;
font-weight: bold;
padding-bottom: 5px;
}
.tab-menu a.active {
border-bottom: 2px solid blue;
}
.tab-content div {
display: none;
}
.tab-content div.active {
display: block;
}
Menu
Join To Get Our Newsletter