JSFiddle - React, Tailwind, and code Playground

HTML

<div class="iStepsR">
            <h2>Заголовок</h2>
            <div class="iStepsTab">
                <div class="iStepsTabTitle active">
                    <span>Set Things Up</span>
                </div>
                <div class="iStepsTabText active">
                    <p>Lorem text</p>
                </div>
            </div>
             <div class="iStepsTab">
                <div class="iStepsTabTitle">
                    <span>Screen Applicants</span>
                </div>
                <div class="iStepsTabText">
                   <p>Lorem text</p>
                </div>
            </div>
             <div class="iStepsTab">
                <div class="iStepsTabTitle">
                    <span>Plan A Move In</span>
                </div>
                <div class="iStepsTabText">
                    <p>Lorem text</p>
                </div>
            </div>
             <div class="iStepsTab">
                <div class="iStepsTabTitle">
                    <span>Welcome Your Tenant</span>
                </div>
                <div class="iStepsTabText">
                    <p>Lorem text</p>
                </div>
            </div>
             <div class="iStepsTab">
                <div class="iStepsTabTitle">
                    <span>Manage Your Properties</span>
                </div>
                <div class="iStepsTabText">
                    <p>Lorem text</p>
                </div>
            </div>
        </div>

CSS

.iStepsTabTitle {
  background: lightgray;
}
.iStepsTabText {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.active .iStepsTabTitle {
  background: yellow;
}
.active .iStepsTabText {
  max-height: 300px;
}

JavaScript

$('.iStepsR').on('click', '.iStepsTabTitle', function(){
  let $tab = $(this).closest('.iStepsTab')
  $tab.toggleClass('active')
    .siblings().removeClass('active')
})