Tab Switch

tab-switching example with tailwind and vanilla JS

This tailwind example is contributed by Prajwal Hallale, on 07-Sep-2023. Component is made with Tailwind v3.4. It is responsive.

Tabs

Author Prajwal Hallale

Tailwind v3.4 7.9k 6

Fork Fullscreen

<div id="tab1" class="p-4 tab-content bg-white shadow-md rounded-lg">
    <h2 class="text-2xl font-semibold mb-2 text-blue-700">Tab 1 Content</h2>
    <p>
      Vestibulum condimentum imperdiet velit nec ornare. Nullam lobortis urna posuere quam porta consequat. Donec
      commodo diam lectus, sit amet tempor dolor scelerisque eget. Vestibulum at lectus dui. Maecenas consectetur tempor
      ipsum non porttitor. Cras accumsan mattis aliquam. Fusce eleifend maximus elit facilisis condimentum. Mauris non
      risus sed ligula convallis fermentum.
      <br>
      Quisque eu purus nunc. Ut eget ligula ac lorem laoreet scelerisque in ut
      nulla. Quisque volutpat elit eget tellus pharetra, vel sollicitudin velit scelerisque. Vivamus ac libero eu nunc
      congue malesuada eu vitae est.
    </p>
  </div>
  <div id="tab2" class="p-4 tab-content bg-white shadow-md rounded-lg hidden">
    <h2 class="text-2xl font-semibold mb-2 text-blue-700">Tab 2 Content</h2>
    <p>Phasellus eget euismod libero, nec ullamcorper justo. Phasellus eget euismod libero, nec ullamcorper justo.
      Phasellus eget euismod libero, nec ullamcorper justo. Etiam eget augue in ante gravida facilisis.</p>
  </div>
  <div id="tab3" class="p-4 tab-content bg-white shadow-md rounded-lg hidden">
    <h2 class="text-2xl font-semibold mb-2 text-blue-700">Tab 3 Content</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Sed ut
      perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Sed ut perspiciatis
      unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
  </div>

</div>

// Show the selected tab content
    const selectedTab = document.getElementById(tabId);
    if (selectedTab) {
      selectedTab.classList.remove('hidden');
    }

// Remove the 'active' class from all tab buttons
    const tabButtons = document.querySelectorAll('.tab-button');
    tabButtons.forEach((button) => {
      button.classList.remove('active');
    });

// Add the 'active' class to the clicked tab button
    const clickedButton = document.querySelector(`[onclick="showTab('${tabId}')"]`);
    if (clickedButton) {
      clickedButton.classList.add('active');
    }
  }

// Initialize the first tab
  showTab('tab1');
</script>

Related Examples

Tab navigation with alpine JS

Mr Robot

4 years ago

18k
Working tabs switch

Fagundo67

3 years ago

15.7k
Tab navigation buttons

Simon Scheffer

3 years ago

18.2k
Tabs section

Simon Scheffer

3 years ago

14.7k
Switch tabs button

gmer33

3 years ago

17.2k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Tab Menu
Tab menu

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

7.1k
Icon group

Conan Hilton

3 years ago

10.3k
Tabs - Htmlwind
Tabs with underline

Htmlwind

1 year ago

1.5k
chat bar
live chat

gidy

1 year ago

2.2k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

4 months ago

475
cards
cards with background animation

Anonymous

2 years ago

3.8k