JSFiddle - React, Tailwind, and code Playground

by Pedro Pinto

HTML

<script src="https://rawgit.com/Doist/ICE/master/ICE.js"></script>
<button class="js-tab-switcher" data-tds-target-container="container-1" data-tds-target-item="tds-reveal-1">Button 1</button>
<button class="js-tab-switcher" data-tds-target-container="container-1" data-tds-target-item="tds-reveal-2">Button 2</button>
<button class="js-tab-switcher" data-tds-target-container="container-1" data-tds-target-item="tds-reveal-3">Button 3</button>

<div class="container-1 container"></div>

<hr>

<button class="js-tab-switcher" data-tds-target-container="container-2" data-tds-target-item="tds-reveal-1">Button 1</button>
<button class="js-tab-switcher" data-tds-target-container="container-2" data-tds-target-item="tds-reveal-2">Button 2</button>
<button class="js-tab-switcher" data-tds-target-container="container-2" data-tds-target-item="tds-reveal-3">Button 3</button>

<div class="container-2 container"></div>

CSS

.container {
  height: 200px;
  background-color: #fff;
}

.tds-reveal-1 { background-color: yellow; }
.tds-reveal-2 { background-color: orange; }
.tds-reveal-3 { background-color: red; }

button.active { background-color: black; color: #fff; }

Babel + JSX

const TabSwitcher = ((buttons) => {

	// Switch tab
  const switchTab = (button) => {
  	const target = button.getAttribute('data-tds-target-container');
    const targetEl = $$('.' + target)[0];
    const item = button.getAttribute('data-tds-target-item');
    const previousButtonClicked = $$('.js-tab-switcher.active[data-tds-target-container="' + target + '"]')[0];
    
    if (previousButtonClicked) {
			const previousItem = previousButtonClicked.getAttribute('data-tds-target-item');
	
      $removeClass(targetEl, previousItem);
  		$removeClass(previousButtonClicked, 'active');
    }
    
		$addClass(targetEl, item);
		$addClass(button, 'active');
  };
  
	// Init
  for (const button of buttons) {
    button.addEventListener('click', (event) => {
      switchTab(event.target);
    });
  }

	return;
  
})($$('.js-tab-switcher'));