JSFiddle - React, Tailwind, and code Playground

by roXon

HTML

<div id="container">

<div id="slider_container">
    <div id="csTitle"></div>
     <div id="content_slider">

        <div id="nav">
            <ul>
                <li>Title 1</li>
                <li>Title 2</li>
                <li>Title 3</li>
            </ul>       
        </div>
    
        <div id="slider">
            
            <div class="box">
                <h1>DIV 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id lobortis lectus. Aliquam adipiscing, sem eget iaculis semper, lectus magna aliquet arcu, lobortis bibendum nunc tellus sed urna. Fusce eget nunc magna, nec venenatis tortor. In et sodales erat. Phasellus ultricies elementum ipsum, sit amet feugiat magna aliquam vel...<br><br>By roXon </p>
            </div>
            
            <div class="box">
                <h1>DIV 2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id lobortis lectus. Aliquam adipiscing, sem eget iaculis semper, lectus magna aliquet arcu, lobortis bibendum nunc tellus sed urna. Fusce eget nunc magna, nec venenatis tortor. In et sodales erat. Phasellus ultricies elementum ipsum, sit amet feugiat magna aliquam vel... </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id lobortis lectus. Aliquam adipiscing, sem eget iaculis semper, lectus magna aliquet arcu, lobortis bibendum nunc tellus sed urna. Fusce eget nunc magna, nec venenatis tortor. In et sodales erat. Phasellus ultricies elementum ipsum, sit amet feugiat magna aliquam vel... </p>
            </div>

             <div class="box">
                <h1>DIV 3</h1>
            <p>WOW! the height resizes!</p>
            </div>  
            
        </div>
    </div>
</div>


</div>

CSS

body{
    font-family:Century Gothic;
    background:#eee;
    font-size:15px;
    overflow:scroll;
}
#container{
    position:relative;
    margin:0 auto;
    width:500px;
}


/*   contentSlider   */
#slider_container{
    position:absolute;
    top:50px;
    width:500px;
    margin-top:10px;
}
#slider_container h1{
    font-family:Georgia;
    font-size:28px;
    font-style:italic;
    color:#4e4e4e;
}
#content_slider{
    position:relative;
    background:#ccc;
    /*height:; will be handled by jQuery!*/
    width:500px;
    padding:10px 0;
    overflow:hidden;   
}
#nav{
    font-family:Georgia;
    font-style:italic;
    position:relative;
    background:#4e4e4e;
    width:500px;
    height:30px;
    line-height:30px;
    text-align:center;
    color:#fff;
}
#nav li{
    font-size:16px;
    font-weight:bold;
    display:inline;
    margin:0 10px;
    cursor:pointer;
    list-style:none;
}
#slider{
    position:relative;
    left:0px;
    top:0px;
    height:180px;
}
.box{
    position:relative;
    z-index:2;
    float:left;
    left:0px;
    background:#fff;
    color:#4e4e4e;
    width:480px;
    /*height:180px;*/
    padding:10px;
}
.btnActive{
    color:#cf5;
    text-shadow: #fff 0px 1px 10px;
}
#csTitle{
    position:absolute;
    z-index:2;
    top:-23px;
}
#csTitle h1{
    font-size:38px;
    text-align:bottom;
    text-shadow: #fff 0px 1px 6px;
}

JavaScript

$(document).ready(function() {
    // contentSlider by: roXon
    //########### SET SLIDER SPEED HERE!
    
    var slideSpeed = 1300;
    
    //#################################
    
    
    
    // STRETCH SLIDER width:
    var boxCount = $('.box').length;    // count num of boxes
    var boxW = $('#content_slider').width();    // count Cslider width
    $('#slider').width(boxCount*boxW);    // set #slider total width
    //#   
    
    //Add style to first li 'button'
    $('#nav li:eq(0)').addClass('btnActive');
    //#
    
    // AUTO GENERATE a custom-numerated ID to each button 'li' and .box
    var liNum = 0;$('#nav li').attr('id', function() {liNum++;return 'nav-' + liNum;});
    var boxNum = 0;$('.box').attr('id', function() {boxNum++;return 'box-' + boxNum;});
    //#     
    
    // FANCY 'on animation' BOX STYLE (pt.1/3)
    $(".box").not(':eq(0)').fadeTo(0, 0.7);    // on page load fade to 0.8 all boxes EXCEPT the first one.
    //#
    
    
    // ADJUST HEIGHT after scroll
    var initHeight = $('#box-1').height()+50;
    $('#content_slider').animate({height: initHeight },0);    
    
    function adjustHeight(){
        var id = $('.btnActive').attr('id');
        var xn = id.substring(id.indexOf("-", 0) + 1);
        var boxN = $("#box-" + xn);        
        var adj = $("#box-" + xn).height()+50;
        $('#content_slider').delay(slideSpeed /2).animate({height: adj }, slideSpeed /2);
    }
    //#
    
    
    // SLIDE!
    function slide() {
        var id = $('.btnActive').attr('id');
        var xn = id.substring(id.indexOf("-", 0) + 1);
        var boxN = $("#box-" + xn);
        var boxOffset = boxN.offset().left;
        var sliderOffset = $("#slider").offset().left;
        $('#slider').animate({left:(sliderOffset - boxOffset) + 'px'}, slideSpeed, function(){     
            // FANCY 'on animation' BOX STYLE (pt.2/3)
            $('.box').fadeTo(0, 0.7);
            $("#box-" + xn).fadeTo(300, 1);
            //#            
  ...