JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul class="circles">
  <li class="circle active" data-toggle="1"></li>
  <li class="circle" data-toggle="2"></li>
  <li class="circle" data-toggle="3"></li>
  <li class="circle" data-toggle="4"></li>
  <li class="circle" data-toggle="5"></li>
</ul>

<ul class="boxes">
  <li class="box active" data-toggled-by="1">
    <h1>Box 1</h1>
  </li>
  <li class="box" data-toggled-by="2">
    <h1>Box 2</h1>
  </li>
  <li class="box" data-toggled-by="3">
    <h1>Box 3</h1>
  </li>
  <li class="box" data-toggled-by="4">
    <h1>Box 4</h1>
  </li>
  <li class="box" data-toggled-by="5">
    <h1>Box 5</h1>
  </li>
</ul>

CSS

ul {
  list-style-type: none;
}

li.circle {
  display: inline-block;
  border: 2px solid red;
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50px;
  margin-right: 25px;
  -webkit-transition: opacity .15s ease-in-out;
  -moz-transition: opacity .15s ease-in-out;
  transition: opacity .15s ease-in-out;
  cursor: pointer;
}

li.circle:hover {
  opacity: .5;
}

li.circle.active {
  border-color: black;
}

li.box {
  width: 90%;
  display: none;
  background: white;
  height: 300px;
  display: none;
}

li.box.active {
  display: block;
}

JavaScript

$('.circle').click(function() {
        // De-activate previously active circle
        $('.circle.active').removeClass('active');

        // Activate clicked circle
        $(this).addClass('active');

        // Get toggle ID of clicked circle
    	  var toggleId = $(this).data('toggle');
      
        // De-activate previously active box
        $('.box.active').removeClass('active');

        // Activate box with corresponding toggle ID
        $('.box[data-toggled-by="' + toggleId + '"]').addClass('active');
    });