<div class="tabs-wrapper">
  <div class="tabs-header">
    <button class="tab-btn active" onclick="openTab(event, 'tab1')">Overview</button>
    <button class="tab-btn" onclick="openTab(event, 'tab2')">Features</button>
    <button class="tab-btn" onclick="openTab(event, 'tab3')">Reviews</button>
  </div>
  <div id="tab1" class="tab-content active">
    <h3>Product Overview</h3>
    <p>This is the main dashboard where you can see all your analytics at a glance.</p>
  </div>
  <div id="tab2" class="tab-content">
    <h3>Key Features</h3>
    <p>Our platform offers real-time tracking, custom reports, and team collaboration tools.</p>
  </div>
  <div id="tab3" class="tab-content">
    <h3>User Reviews</h3>
    <p>Rated 5 stars by over 10,000 happy customers worldwide.</p>
  </div>
</div>

.tabs-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.tabs-header {
  display: flex;
  gap: 20px;
  border-bottom: 2px solid #f3f4f6;
  margin-bottom: 25px;
}
.tab-btn {
  background: none;
  border: none;
  padding: 10px 0;
  font-size: 1rem;
  color: #6b7280;
  cursor: pointer;
  position: relative;
  font-weight: 500;
  transition: color 0.3s;
}
.tab-btn.active {
  color: #2563eb;
}
.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2563eb;
}
.tab-content {
  display: none;
  animation: fadeEffect 0.5s;
}
.tab-content.active {
  display: block;
}
.tab-content h3 {
  margin-top: 0;
  color: #111827;
}
.tab-content p {
  color: #4b5563;
  line-height: 1.6;
}
@keyframes fadeEffect {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].className = tabcontent[i].className.replace(" active", "");
  }
  tablinks = document.getElementsByClassName("tab-btn");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).className += " active";
  evt.currentTarget.className += " active";
}

Back to Snippets

Modern Tabs Interface JS

Switch between content sections smoothly with this modern tabs interface. The active tab is highlighted with a clean bottom border, and the content transitions instantly without page reloads.

420

#css

#javascript

#tabs

#interface

#ui component

#navigation

#content switcher

/HTML *CSS ()JS Output Live Updates

.tabs-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.tabs-header {
  display: flex;
  gap: 20px;
  border-bottom: 2px solid #f3f4f6;
  margin-bottom: 25px;
}
.tab-btn {
  background: none;
  border: none;
  padding: 10px 0;
  font-size: 1rem;
  color: #6b7280;
  cursor: pointer;
  position: relative;
  font-weight: 500;
  transition: color 0.3s;
}
.tab-btn.active {
  color: #2563eb;
}
.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2563eb;
}
.tab-content {
  display: none;
  animation: fadeEffect 0.5s;
}
.tab-content.active {
  display: block;
}
.tab-content h3 {
  margin-top: 0;
  color: #111827;
}
.tab-content p {
  color: #4b5563;
  line-height: 1.6;
}
@keyframes fadeEffect {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}