JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
		<li class="tab-link current" data-tab="tab-1">Change Address</li>
		<li class="tab-link" data-tab="tab-2">Change Ownership</li>
		<li class="tab-link" data-tab="tab-3">Re-grade Service</li>
		<li class="tab-link" data-tab="tab-4">Cease Service</li>
	</ul>

	<div id="tab-1" class="tab-content current">
		Please call us to discuss address changes on 01392 333 333
	</div>
	<div id="tab-2" class="tab-content">
		 Please call us to discuss ownership changes on 01392 333 333
	</div>
	<div id="tab-3" class="tab-content">
		Please call us to discuss re-grading of this service on 01392 333 333
	</div>
	<div id="tab-4" class="tab-content">
		Please call us to discuss ceasing of this service on 01392 333 333
	</div>

CSS

ul.tabs {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }
    ul.tabs li {
        background: none;
        color: #222222;
        display: inline-block;
        padding: 10px 15px;
        cursor: pointer;
        background-image:...

JavaScript

$('ul.tabs li').click(function() {
            var tab_id = $(this).attr('data-tab');

            $('ul.tabs li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#" + tab_id).addClass('current');
        });