JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.0.0b1.js"></script>
  
  <div id="container">
    
	<span class="button firstbutton">First Button</span>
	<span class="button secondbutton">Second Button</span>
  
	<div id="first">ONE</div>
	<div id="second">TWO</div>
    
	</div>

CSS

#container {
	float: left;
	display: inline;
	background: #fff;
	height: auto;
}
#first {
	display: none;
	width: 500px;
	height: 300px;
	background-color: #EC644B;
	color: #fff;
	font-family: Arial;
	font-size: 30px;
	text-align: center;
}
#second {
	display: none;
	width: 500px;
	height: 300px;
	background-color: #446CB3;
	color: #fff;
	font-family: Arial;
	font-size: 30px;
	text-align: center;
}
.button {
	width: 250px;
	display: inline-block;
	clear: both;
	margin: 10px 0;
	font-size: 24px;
	font-family: Arial;
	font-weight: 300;
	line-height: 49px;
	text-align: center;
	color: #fff;
	cursor: pointer;
}
.firstbutton {
	background-color: #EC644B;
}
.secondbutton {
	background-color: #446CB3;
}
.buttonactive {
	color: #000;
	background-color: #fff;
	border-bottom: 5px solid #000;
}

JavaScript

$(document).ready(function(){
    $('.firstbutton').click(function(){
        if($('#first').is(':visible')) {
            $('#first').hide();
        }
        else {
        $('#second').hide();
        $('#first').fadeIn();
        }
    });
});

$(document).ready(function(){
	$('.secondbutton').click(function() {
        if ($('#second').is(':visible')) {
              $('#second').fadeOut();
            if ($("#second").data('lastClicked') !== this) {
               $('#second').fadeIn();
            }
        } 
		else {
			$('#first').hide();
			$('#second').fadeIn();
		}
        $("#second").data('lastClicked', this);
	});
});

$(document).ready(function(){
    $('.button').click(function() {  
        $('.button').not(this).removeClass('buttonactive');
        $(this).toggleClass('buttonactive');
    });
});