JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
<a href="#" data-category-type="Food">Food</a>

<a href="#" data-category-type="Travelling">Travelling</a>

<a href="#" data-category-type="Sports">Sports</a>

</div>
<div id="Categories">
    <div class="hide" data-category-type="Food">Foods are Fruits, Chicken, Rice, Pizza...</div>
    <div class="hide" data-category-type="Travelling">My Travelling places are Bangalore, Goa, Kolkata..</div>
    <div class="hide" data-category-type="Sports">Sports :Cricket, Basket ball, Tennis, ..</div>
    <div class="hide" data-category-type="Food">Foods are Fruits, Chicken, Rice, Pizza...</div>
</div>

CSS

.hide {
    display:none
}

JavaScript

$('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    $('#Categories > div').addClass('hide')
    $('#Categories > div[data-category-type="'+cat+'"]').removeClass('hide');
});