JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">

    <h3 class="tab">This is first tab</h3>
    <div class="tab_content">
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point     of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</p>
    </div>
    
    <h3 class="tab">This is first tab</h3>
    <div class="tab_content">
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point     of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</p>
    </div>
    
    <h3 class="tab">This is first tab</h3>
    <div class="tab_content">
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point     of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</p>
    </div>
    
    <h3 class="tab">This is first tab</h3>
    <div class="tab_content">
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point     of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</p>
    </div>
    

</div>

CSS

body {
    margin: 0;    
}

#tabs {
    width: 400px;
    margin: 0 auto;
}

.tab {
    background: grey;
    padding: 5px;
    color: white;    
    border: 1px solid black;
}

.tab_content {
    display: none;
}

.tab_content p{
    margin: 0;
}

JavaScript

var tab = $('#tabs .tab')

tab.on('click', function(){
    $(this).next().slideToggle(2000);
    
    });