JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <section class="sidebar">
    <header class="sidebar-top">
      <div class="sidebar-top__text sidebar-top__text--active">Popular</div>
      <div class="sidebar-top__text">Recent</div>
      <div class="sidebar-top__text">Comments</div>
      <div class="sidebar-top__text">Tags</div>
    </header>
    
    <ul class="sidebar-bottom sidebar-bottom--active">
      <li class="sidebar-block">
        <div class="sidebar-block__img"></div>
        <div class="sidebar-block__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, iste?</div>
      </li>
      <li class="sidebar-block">
        <div class="sidebar-block__img"></div>
        <div class="sidebar-block__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, iste?</div>
      </li>
      <li class="sidebar-block">
        <div class="sidebar-block__img"></div>
        <div class="sidebar-block__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, iste?</div>
      </li>
      <li class="sidebar-block">
        <div class="sidebar-block__img"></div>
        <div class="sidebar-block__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, iste?</div>
      </li>
      <li class="sidebar-block">
        <div class="sidebar-block__img"></div>
        <div class="sidebar-block__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, iste?</div>
      </li>
    </ul>
    
    <ul class="sidebar-bottom">
      <li class="sidebar-block">
        <div style="background-color: black;" class="sidebar-block__img"></div>
        <div class="sidebar-block__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, iste?</div>
      </li>
      <li class="sidebar-block">
        <div style="background-color: black;" class="sidebar-block__img"></div>
        <div class="sidebar-block__text">Lorem ipsum dolor sit amet...

CSS

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

.sidebar{
  width: 300px;
  border: 1px solid #cacaca;
}
.sidebar-top{
  display: flex;
  justify-content: space-between;
}
.sidebar-top__text {
  flex: 1;
  padding: 5px;
  background-color: #cacaca;
  text-align: center;
}
.sidebar-top__text--active {
  background-color: #fff;
}
.sidebar-top__text:hover{
  cursor: pointer;
}

.sidebar-bottom {
  padding: 5px;
  display: none;
}
.sidebar-bottom--active {
  display: block;
}

.sidebar-block{
  margin-bottom: 10px;
  display: flex;
}
.sidebar-block__img{
  margin-right: 5px;
  width: 60px;
  height: 30px;
  background-color: red;
}

JavaScript

$(document).ready(function () {
	var $sbHeading = $('.sidebar-top__text'),
  		$sbList = $('.sidebar-bottom');
      
  $sbHeading.on("click", function () {
    var $this = $(this);

    $sbHeading.removeClass('sidebar-top__text--active');
    $this.addClass('sidebar-top__text--active');

    var tabIndex = $this.index();
    $sbList
    	.removeClass('sidebar-bottom--active')
      .eq(tabIndex)
      .addClass('sidebar-bottom--active');
  });
});