JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab-container">
    <ul class="tab-list">
        <li>Шаг 1</li>
        <li>Шаг 2</li>
        <li>Шаг 3</li>
    </ul>
    <div class="tab-pane">
        <div class="pane">Form 1</div>
        <div class="pane">Form 2</div>
        <div class="pane">Form 3</div>
    </div>
</div>

CSS

.tab-list li {
    display: inline;
    padding: 5px;
    cursor: pointer;
}

.tab-list li.active {
    background: #000;
    color: #fff;
}

.pane {
    padding: 20px;
    display: none;
}

.pane.active {
    display: block;
}

JavaScript

tabs();

$('.tab-list li').click(function() {
	var obj = $(this);
	var container = obj.parents('.tab-container');
	var index = obj.index();
	$('.tab-list li', container).removeClass('active').eq(index).addClass('active');
	$('.tab-pane .pane', container).removeClass('active').eq(index).addClass('active');
});

function tabs () {
	$('.tab-container').each(function() {
		$('.tab-list li', this).eq(0).addClass('active');
		$('.tab-pane .pane', this).eq(0).addClass('active');
	});
}