JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<script src="https://raw.github.com/cubiq/iscroll/master/src/iscroll.js"></script>
<div id="wrapper">

<div class="footernav">
<a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
</a>
    
    <a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
 </a>       
        <a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
            </a>
            <a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
            </a>
            <a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
            </a>
            <a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
            </a>
            <a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
            </a>
            <a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
            </a>
            <a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
            </a>
            <a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella...

CSS

body {background:#ccc;padding:50px}
#wrapper {
height: 250px;
position: absolute;
z-index: 1;
width: 100%;
background: whiteSmoke;
overflow: auto;
}
.footernav {height:350px; overflow:hidden; background:white;


    width:8520px;

    height:100%;

    float:left;

    padding:0;



}
.footernav a {text-decoration:none;font-weight:bold}
.footernav figure {
    float:left;padding-top:28px;
padding-bottom:28px;
margin-right:72px;
width:238px;border:1px solid red; text-align:center
}

.footernav figure:last-child {margin-right:0;}
.footernav img {margin-bottom:20px; border-radius:10px}
.footernav figure:hover img, .footernav figure:active img {border:2px solid black;border-radius:10px }

.footernav h3 {color:#000;font-weight:bold}
.footernav span {color:#f73ea5}
.footernav s {color:#666}

JavaScript

var myScroll;

function loaded() {

    myScroll = new iScroll('wrapper');

}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);