JSFiddle - React, Tailwind, and code Playground

by abhishek bhandari

HTML

<ul class="acf-hl acf-tab-group">
    <li class="active"><a href="#">tab1</a>

    </li>
    <li class="ac tive"><a href="#">tab2</a>

    </li>
    <li><a href="#">tab3</a>

    </li>
</ul>
<div class="single-item ae0fgf0c hidden-by-tab"></div>
<div class="single-item ae0fgf0b hidden-by-tab"></div>

<h3 class="submit-button">Budget</h3> 
<div class="single-item ae0fgf045"></div>
<div class="single-item ae0fgf0e"></div>
<div class="single-item ae0fgf0cf hidden-by-tab"></div>
<div class="single-item ae0fgf0t hidden-by-tab"></div>

CSS

.selected{
  color:red;   
}
.active {
    color: green;
}

JavaScript

$('.acf-hl.acf-tab-group li').on('click', function () {

        $('.active').removeClass('active');

        if ($(this).index() == 1) $('h3.submit-button').addClass('active');
        return false;
    });