Home
Prajwal Hallale
Tab Switch

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 CSS v3. It is responsive.

Tabs

Author Prajwal Hallale

7.6k

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