JSFiddle - React, Tailwind, and code Playground
HTML
<div class="btn btn1" data-num="1"></div>
<div class="btn btn2" data-num="2"></div>
<div class="block active" id="block1"></div>
<div class="block" id="block2"></div>
CSS
.block {
display: none;
width: 100%;
height: 100px;
}
#block1 {background-color: red;}
#block2 {background-color: blue;}
.btn {
width: 100px;
height: 50px;
margin: 20px;
background-color: #000;
}
.block.active {display: block;}
JavaScript
$(document).ready(function() {
$('.btn').click(function(event) {
$('.block').removeClass('active')
var num = $(this).attr('data-num');
$('#block'+num).addClass('active')
});
});