JSFiddle - React, Tailwind, and code Playground

by hlmurray91

HTML

<!-- 
Finish developing this tabbed interface such that the tab links show and hide their corresponding content blocks. Tabs should display left to right and have an active and inactive state, differentiated by background color. You may change *any* aspect of the markup, and use whatever Javascript and CSS you'd like.
 -->

<ul>
  <li class="JS-toggle active" id="one"><a href="#">Tab 1</a></li>
  <li class="JS-toggle" id="two"><a href="#">Tab 2</a></li>
  <li class="JS-toggle" id="three"><a href="#">Tab 3</a></li>
</ul>

<div class="JS-open" id="one">
  <h1>Tab Content 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit debitis omnis eius vitae suscipit fuga temporibus eum velit totam odio aspernatur aperiam. Debitis eos atque nemo cupiditate neque sunt officia!</p>
</div>

<div class="JS-open" id="two">
  <h1>Tab Content 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit debitis omnis eius vitae suscipit fuga temporibus eum velit totam odio aspernatur aperiam. Debitis eos atque nemo cupiditate neque sunt officia!</p>
</div>

<div class="JS-open" id="three">
  <h1>Tab Content 3</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit debitis omnis eius vitae suscipit fuga temporibus eum velit totam odio aspernatur aperiam. Debitis eos atque nemo cupiditate neque sunt officia!</p>
</div>

SCSS

ul {
  display: block;
}
li {
  display: inline-block;
  a {
    display: block;
    text-decoration: none;
    color: #000;
    background-color: blue;
    padding: 20px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    
    &.active {
      background-color: red;
    }
  }
}

div {
  position: absolute;
  top: 75px;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  
  &.active {
    opacity: 1;
  }
}

JavaScript

$('li.JS-toggle').click(function() {
	var buttonNumber = $(this).attr('id');
	$('li.JS-toggle').find('a').not(this).removeClass('active');
  $(this).find('a').addClass('active');
  $('div').removeClass('active');
  $('div#'+buttonNumber).addClass('active');
});