JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="menu">
    <div class="menu-item active">Menu 1</div>
    <div class="menu-item">Menu 2</div>
    <div class="menu-item">Menu 3</div>
    <div class="menu-item">Menu 4</div>
    <div class="menu-item">Menu 5</div>
  </div>
  <div class="content">
    <div class="content-text active">Some text 1</div>
    <div class="content-text">Some text 2</div>
    <div class="content-text">Some text 3</div>
    <div class="content-text">Some text 4</div>
    <div class="content-text">Some text 5</div>
  </div>
</div>

SCSS

.wrapper {
  display: flex;
}

.menu {
  width: 10%;
  background-color: gray;

  &-item {
    cursor: pointer;
    text-align: center;

    &.active {
      text-decoration: underline;
    }
  }
}

.content {
  width: 100%;
  background-color: #fff;
}

.content-text {
  text-align: center;
  display: none;
  
  &.active {
    display: inherit;
  }
}

JavaScript

$('.menu-item').click(function() {
	$('.menu-item').removeClass('active');
	$(this).addClass('active');
});