JSFiddle - React, Tailwind, and code Playground

by S1l3

HTML

<ul>
    <li><a href="#item1" >Item 1</a></li>
    <li><a href="#item2" >Item 2</a></li>
    <li><a href="#item3" >Item 3</a></li>
    <li><a href="#item4" >Item 4</a></li> 
</ul>    

<div id="item1" class="content">
    item 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id leo id tellus hendrerit posuere. Vestibulum id sapien et quam ultricies elementum. Aliquam erat volutpat. Fusce convallis sollicitudin nisl, sit amet facilisis nibh sollicitudin in. Nam ut lorem purus. Vivamus mattis mi sit amet odio bibendum placerat. Morbi convallis ante id ante commodo aliquam. Maecenas ornare scelerisque mollis. Phasellus ac volutpat sem.
</div>    
<div id="item2" class="content">
    item 2
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id leo id tellus hendrerit posuere. Vestibulum id sapien et quam ultricies elementum. Aliquam erat volutpat. Fusce convallis sollicitudin nisl, sit amet facilisis nibh sollicitudin in. Nam ut lorem purus. Vivamus mattis mi sit amet odio bibendum placerat. Morbi convallis ante id ante commodo aliquam. Maecenas ornare scelerisque mollis. Phasellus ac volutpat sem.
</div>   

<div id="item3" class="content">
    item 3
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id leo id tellus hendrerit posuere. Vestibulum id sapien et quam ultricies elementum. Aliquam erat volutpat. Fusce convallis sollicitudin nisl, sit amet facilisis nibh sollicitudin in. Nam ut lorem purus. Vivamus mattis mi sit amet odio bibendum placerat. Morbi convallis ante id ante commodo aliquam. Maecenas ornare scelerisque mollis. Phasellus ac volutpat sem.
</div>   

<div id="item4" class="content">
    item 4
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id leo id tellus hendrerit posuere. Vestibulum id sapien et quam ultricies elementum. Aliquam erat volutpat. Fusce convallis sollicitudin nisl, sit amet facilisis nibh sollicitudin in. Nam ut lorem purus. Vivamus mattis mi sit amet odio...

CSS

.content{
    position:relative;
    top:0;
    
}

JavaScript

var contents = $('.content');
var links = $('a');

$(contents).hide();

$.each(links,function(i,v){
    $(v).click(function(){
        $(contents).hide();
        $(contents).eq(i).css('top','500px').animate({'top':'0px'},slow);
        
            
        
    });

});