JSFiddle - React, Tailwind, and code Playground

by winddweb

HTML

<div class="wrap">
    <ul class="clearfix">
        <li>Home</li>
        <li>Gallery</li>
        <li>Portfolio</li>
        <li>About</li>
    </ul>
    <a href="#" data-nav="prev">prex</a><br />
     <a href="#" data-nav="prev">prex</a>
</div>
<div class="container">
    <div id="slider">
        <p data="1">1</p>
        <p data="2">2</p>
        <p data="3">3</p>
    </div>
</div>

CSS

div.wrap{
    background-color:rgba(201,121,22,.3);
    padding:30px;
}
 ul{
    margin:20px 0 0 20px;
    width:140px;
   /* border:1px solid #333;*/
}

 li{
    padding:1px;
    box-shadow:0 0 1px #444;
    margin-bottom:1px;
    font-size:40px;
    display:block;
    float:left;
    background-color:#c22;
    color:#efefef;
}

li:hover{
    font-size:48px;
}


.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.active{
    box-shadow:inset 0 0 5px #333;
    background-color:#b22;
}

div.container{
    width:500px;
    height:200px;
    background:#ddd;
    overflow:auto;
}
#slider{
    height:200px;
    width:1500px;
}

p{
    float:left;
    width:500px;
    height:200px;
    background:#999;
    font-size:150px;
}

a[data-nav]{
    display:block;
    width:50px;
    text-align:center;
    line-height:50px;
    background-color:#f00;
    color:#fff;
    font-size:20px;
    font-family:
}

JavaScript

$('ul li').on('mousedown',function(){
    $(this).addClass('active');
})
    .on('mouseup mouseleave',function(){
    $(this).removeClass('active');
    });