JSFiddle - React, Tailwind, and code Playground

by Gert Vaartjes

HTML

<div class="outer">
    <ul>
        <li><a class="p" href="#">prev</a></li>
        <li><a class="n" href="#">next</a></li>
    </ul>
    <div class="inner">
        <img src="http://www.lorempixum.com/200/200/?1"></img>
                <img src="http://www.lorempixum.com/200/200/?2"></img>
    </div>
</div>

CSS

div.outer {border: 1px solid red;
    width: 200px;
    height:300px; 
}
div.inner {
    overflow:hidden;
    position:relative;
    width:200px;
    height:800px;
    /*border:1px solid green*/;
}
ul {
    list-style-type:none;
    padding-left: 0px;
}

ul li {
  
}

ul a {
    display: block;
    color:red;
    z-index:10;
    _position: absolute;
    background-color:yellow;
    left:50%;
}

a.n {
    text-align:center;
    top: 100%
}

a.n {
    text-align:center;
    top: 120%
}