JSFiddle - React, Tailwind, and code Playground

by Sree K

HTML

<div id="information">
    <ul class="pagination">
        <li><a href="#"><span>Administration</span><small>Learn Site Administration</small></a></li>
        <li><a href="#"><span>Management</span><small>Learn Access Management</small></a></li>
        <li><a href="#"><span>Dashboard</span><small>Learn Dashboard Functions</small></a></li>
        <li><a href="#"><span>Visitors</span><small>Learn Visitor Management</small></a></li>                        
    </ul>
</div>

CSS

#information {
width: 1000px;
height: 350px;
margin: 0 auto;
background:url(../images/information-bg.jpg) no-repeat 25px 5px;
}
#information ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#information ul.pagination{
    float: left;
    list-style:none;
    padding:0;
    margin:0;
    width:246px;
    height:350px;
    background:url(../images/pagination-bg.jpg) no-repeat left top;
}
#information ul.pagination li {
    padding:5px 0 0 5px;
    margin-bottom:-5px;
}
#information ul.pagination li a {
    width:270px;
    height:85px;
    background-repeat:no-repeat;
    background-position:left -85px;
    background-image:url(../images/thumb-sprite.png);
    text-decoration:none;
    display:block;
    color: #464646;
}
#information ul.pagination li.current a {
    background-position:left top;
    color: white;
}
#information ul.pagination li a span {
    font-size: 26px;
    line-height: 1.2em;
    display: block;
    padding: 14px 0 0 0;
}
#information ul.pagination li a small {
    display:inline-block;
    color:#428301;
    background-repeat:no-repeat;
    background-position:right -80px;
    background-image:url(../images/arrows.gif);
    padding:0 17px 0 0;
    font-size: 10px;
}
#information ul.pagination li.current a small {
    font-size: 10px;
    color: #89C100;
    background-position:right 5px;
}
#information ul.pagination li a span, #information ul.pagination li a small {
    padding-left:40px;
}

JavaScript

$("document").ready(function(){

    //Adding class to pagination and showing first image
    var currentPagination = $("ul.pagination li:eq(0)").addClass("current");
    var currentslide = $("ul.slides li:eq(0)").fadeIn(2000);    


    //On click of pagination link, changing background of pagination and anmating new slide
    $("ul.pagination li").click(function (){           
        currentPagination.removeClass("current");        
        currentPagination = $(this).addClass("current");              
        var ul = $(this).parent();
        var index = ul.children().index(this);
    });

});