JSFiddle - React, Tailwind, and code Playground

by Thahir

HTML

<div id="slider">

<!-- :target hooks -->
<div id="a1">
<div id="a2">
<div id="a3">
<div id="a4">

	<!-- 1 -->
	<a href="#a2" class="up2 default">2</a>
	<a href="#a2" class="up2">2</a>
	
	<!-- 2 -->
	<a href="#a1" class="down1">1</a>
	<a href="#a3" class="up3">3</a>
	
	<!-- 3 -->
	<a href="#a2" class="down2">2</a>
	<a href="#a4" class="up4">4</a>
	
	<!-- 4 -->
	<a href="#a3" class="down3">3</a>
	
	<ul>
		<li>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id magna. Maecenas metus. Nunc dignissim rhoncus neque. Vestibulum leo nibh, suscipit ac, tempus nec, sollicitudin et, erat. Mauris neque purus, tincidunt ac, luctus a, sagittis eu, nisi. Morbi quis neque id elit facilisis ullamcorper.</p>
		</li>	
		<li>
			<p>Sed ut est. Curabitur molestie. Cras pellentesque. Fusce euismod. Fusce risus. Curabitur bibendum. Phasellus vulputate convallis nulla. Suspendisse ac velit. Etiam eros ligula, pulvinar in, ultrices porttitor, rutrum ut, tellus. Fusce accumsan elit vitae ligula.</p>
		</li>	
		<li>
			<p>Maecenas consequat consequat lectus. Aliquam elementum gravida lorem. Vestibulum quam tortor, iaculis id, ornare ut, eleifend et, turpis. Etiam ornare dignissim nisi. Ut dolor. Phasellus nec eros. Vivamus fermentum accumsan est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sit amet erat.</p>			
		</li>	
		<li>
			<p>In vel lorem quis turpis auctor volutpat. Duis lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque nibh ligula, adipiscing lacinia, semper et, laoreet iaculis, eros. Sed blandit. Sed elit. Suspendisse in nibh eget metus blandit convallis.</p>
		</li>
	</ul>

</div> <!-- End #a4 -->
</div> <!-- End #a3 -->
</div> <!-- End #a2 -->
</div> <!-- End #a1 -->

</div>

CSS

#slider {
    margin: auto;
    overflow: hidden;
    background: #f6f7f8;
}
#slider, ul, li { height: 170px; }

#slider, li { position: relative; width: 500px; }

#slider{
    margin: auto;
    overflow: hidden;
    padding: 10px;
}

li { float: left; }

ul{
    list-style-type: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 2000px;
}

:target .up2.default {
    display: none;
}

p {
    position: absolute;
    width: 400px;
    z-index: 1;
    margin: 0;
}

#a1:target ul { left: 0px; }
#a2:target ul { left: -500px; }
#a3:target ul { left: -1000px; }
#a4:target ul { left: -1500px; }

#a1:target .up2,
#a2:target .down1,
#a2:target .up3,
#a3:target .down2,
#a3:target .up4,
#a4:target .down3{ 
    display: block; 
}

ul { -webkit-transition: left .8s linear; }

.up2.default, #a1:target .up2, #a2:target .down1, #a2:target .up3, #a3:target .down2, #a3:target .up4, #a4:target .down3 {
    display: block;
}

a[class^="up"] {
    right: 10px;
}


a[class^="down"] {
    left: 10px;
}

a{
  background: url("http://dnok91peocsw3.cloudfront.net/relaunch/fabshop_images_latest.png?v=37") no-repeat scroll 0 0 transparent;
    height: 20px;
    width: 12px;
    display: inline-block;
    background-position: -180px -17px;
    outline-width: 0px;
    position: absolute;
    top: 90px;
    text-indent: -9999px;
    z-index: 2;
}