JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="index-controls">
<li>
<div id="1" class="link active">FREE DISC Profile</div>
<ul>
<li>
<h2>Training that fits like a glove</h2>
</li>
<li>
<p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p>
</li>
</ul>
</li>
<li>
<div id="2">Last Minute Availability</div>
<ul>
<li>
<h2>Training that fits like a glove</h2>
</li>
<li>
<p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p>
</li>
</ul>
</li>
<li>
<div id="3">Bespoke Training</div>
<ul>
<li>
<h2>Training that fits like a glove</h2>
</li>
<li>
<p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p>
</li>
</ul>
</li>
</ul>
CSS
.active {
background-color: #CCC;
}
JavaScript
var list = $('#index-controls li div');
list.click(function() {
list.removeClass('active');
$(this).addClass('active');
});