Category · Navigation Menus Difficulty Level · Intermediate Published on · August 18, 2025

Animated Tabs

A set of stylish, animated tabs to organize content and improve user experience.

#tabs #animated #navigation #css #javascript

Responsive Design

Yes

Dark Mode Support

lines

109

Browser Compatibility

Chrome · Firefox · Safari · Edge

Live Preview

Interact with the component without leaving the page.

300px

Overview

A set of stylish, animated tabs to organize content and improve user experience.

How to use

Copy the HTML markup into your page.
Paste the CSS into your stylesheet and ensure the selectors match your markup.
Paste the JavaScript and load it after the markup.
Adjust spacing, colors, and text to match your design system.

Customization tips

Rename class names to avoid collisions with your existing CSS.
Replace hard-coded colors with CSS variables for theming.
Verify the layout at 320px, 768px, and 1024px widths.

HTML

lines

CSS

lines

JavaScript

lines

                <div class="tabs-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">Home</button>
    <button class="tab-btn" data-tab="tab2">Profile</button>
    <button class="tab-btn" data-tab="tab3">Settings</button>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">
      <h3>Home Content</h3>
      <p>This is the content for the home tab.</p>
    </div>
    <div id="tab2" class="tab-pane">
      <h3>Profile Content</h3>
      <p>This is the content for the profile tab.</p>
    </div>
    <div id="tab3" class="tab-pane">
      <h3>Settings Content</h3>
      <p>This is the content for the settings tab.</p>
    </div>
  </div>
</div>

              

                .tabs-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background-color: #f1f5f9;
  border-radius: 10px;
  padding: 20px;
}

.tab-buttons {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
}

.tab-btn {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-size: 16px;
  position: relative;
  transition: color 0.3s;
}

.tab-btn.active {
  color: #3b82f6;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #3b82f6;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.tab-btn.active::after {
  transform: scaleX(1);
}

.tab-content {
  padding-top: 20px;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.5s;
}

.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

              

                document.addEventListener('DOMContentLoaded', () => {
  const tabs = document.querySelectorAll('.tab-btn');
  const tabPanes = document.querySelectorAll('.tab-pane');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const target = document.getElementById(tab.dataset.tab);

      tabs.forEach(t => t.classList.remove('active'));
      tab.classList.add('active');

      tabPanes.forEach(pane => {
        if (pane.id === tab.dataset.tab) {
          pane.classList.add('active');
        } else {
          pane.classList.remove('active');
        }
      });
    });
  });
});

              