JSFiddle - React, Tailwind, and code Playground

HTML

There are three items next to each other [li #1] [li #2] [li #3]:
<div id="slider">
    <ul>
        <li class="one">
            <h1>Header #1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
        </li>
         <li class="two">
            <h1>Header #2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
        </li>
         <li class="three">
            <h1>Header #3</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
        </li>
</div>
 
        <a href="#" class="one">Scroll to #1</a> 
        <a href="#" class="two">Scroll to #2</a>
        <a href="#" class="three">Scroll to #3</a>

CSS

#slider {
    border: solid 1px red;
    display: block;
    overflow: hidden; /* only one item at time will be visible */
    width: 700px;
    height: 100px;
}

#slider ul {
    width: 2200px; /*3 items * 700 px + margins */
    height: 100px;
}

#slider ul li {
    display: inline-block;
    width: 700px;
    height: 100px;
}

JavaScript

jQuery('a').click(function(){
    var thisClass = jQuery(this).attr('class');
});