JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <nav class="nav">
    <ul>
      <li><a href="#" class="show" data-toggle="step1">Step 1</a></li>
      <li><a href="#" class="show" data-toggle="step2">Step 2</a></li>
      <li><a href="#" class="show" data-toggle="step3">Step 3</a></li>
      <li><a href="#" class="show" data-toggle="step4">Step 4</a></li>
      <li><a href="#" class="show" data-toggle="step5">Step 5</a></li>
    </ul>
  </nav>

  <div class="content">
    <div class="toggle" id="step1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni rerum repellat sed quo eum consequuntur aliquid nobis dolore tempore. Enim.</p>
    </div>
    <div class="toggle" id="step2">
      <p>Step 2</p>
    </div>
    <div class="toggle" id="step3">
      <p>Step 3</p>
    </div>
    <div class="toggle" id="step4">
      <p>Step 4</p>
    </div>
    <div class="toggle" id="step5">
      <p>Step 5</p>
    </div>
  </div>

</div>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
}

.nav {
  background: lightgrey;
  color: #FFF;
}

.nav ul {
  list-style: none;
}

JavaScript

$(function($) {
  $('.show').click(function() {
    $('.toggle').hide();
    $('#' + $(this).data('toggle')).show();
  });
  $('[data-toggle="step1"]').click();

});