JSFiddle - React, Tailwind, and code Playground

by techydude

HTML

<div style="width:57%; padding:11%;"><div id="left1"></div></div>
<div style="width:32%; padding:0%;"><div id="right1"></div></div>
<div style="width:57%; padding:11%;">
<div id="one" class="divider">

</div>
<div id="two" class="divider">
</div>

<div id="three" class="divider">
</div>

<div id="four" class="divider">
</div>

<div id="five" class="divider">
</div>

<div id="six" class="divider">
</div>


</div>

</div><div style="top:110px;position:relative; float:right;width:32%; padding:0%;"><div id="right2">

<ul id="">
<li><a href="#one" >1</a></li>
<li><a href="#two" >2</a></li>
<li><a href="#three" >3</a></li>
<li><a href="#four" >4</a></li>
<li><a href="#five" >5</a></li>
<li><a href="#six" >6</a></li>
</ul>


</div>

CSS

#one {
    height: 430px;
    width:100px;
    background-color:#0f0;
}

#two {
    height: 480px;
     width:100px;
    background-color:#F00;
}

#three {
    height: 260px;
     width:100px;
    background-color:#0f0;
}

#four {
    height: 400px;
     width:100px;
    background-color:#F00;
}

#five {
    height: 480px;
     width:100px;
    background-color:#0f0;
}

#six {
    height: 460px;
     width:100px;
    background-color:#F00;
}

#right1 {
    position:fixed;
    width: 300px;
    top: 152px;
}

#right2 {
    position:fixed;
    width: 300px;
    top: 225px;
}

#left1 {
    position: fixed;
    height: 240px;
    background-color: #F7F8F6;
    top: 0px;
    width: 535px;
    z-index: 999;
}

.divider {
    border-bottom:#BFBFBF 1px solid;
    margin-bottom: 30px;
}
ul {
    margin-top:50px;
}

JavaScript

<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
    
        <script type="text/javascript">
            $(function() {
                $('ul#li a').bind('click',function(event){
                    var $anchor = $(this);
                    
                    $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).position().top + 100
                    }, 1900,'easeOutExpo');

                    event.preventDefault();
                });
            });
        </script>