JSFiddle - React, Tailwind, and code Playground

by andi msc

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. Cras id arcu. In quam orci, accumsan ut, porttitor in, malesuada vitae, eros. In auctor suscipit nisl. Integer in eros eget sem tempor vestibulum. Mauris nec massa.</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. Phasellus venenatis accumsan ante. Nam tempor. Etiam eu tellus non erat vehicula congue. Nulla vitae tortor. Nullam lobortis leo eu tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</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. Morbi viverra nulla. Maecenas semper. Aliquam vulputate dapibus diam. Suspendisse ut nunc ac diam convallis fringilla. Donec facilisis, justo quis consectetur adipiscing, odio risus vulputate dolor, at pulvinar magna risus ac...

CSS

html, body, ul, p
{
margin: 0px;
padding: 0px;
}

html
{
background: #ddd url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%01%F4%08%06%00%00%00%FC%3DG%97%00%00%00%04sBIT%08%08%08%08%7C%08d%88%00%00%00%09pHYs%00%00%0B%12%00%00%0B%12%01%D2%DD~%FC%00%00%00%16tEXtCreation%20Time%0004%2F21%2F09Q2O%D2%00%00%00%25tEXtSoftware%00Macromedia%20Fireworks%20MX%202004%87v%AC%CF%00%00%00%3AIDATx%9C%ED%CE%B1%09%00%40%0C%C3%40%93%FDw%D6%CF%F0%10%82%0A7*%C5%05%60%92d)%80f%B5c%910j%F1%5B%24%8CZ%FC%16%09%A3%16%BFE%C2%A8%E5f%F5%9D%07%C7%09m%7D%3E%5DSI%00%00%00%00IEND%AEB%60%82") repeat-x left top;
}

body
{
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 27px;
margin-top: 100px;
text-align: justify;
}

p:first-line
{
color: #5b6f7b;
font-family: 'Trebuchet MS',Arial,Helvetica,sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 45px;
text-transform: capitalize;
}

p:after
{
color: #5b6f7b;
font-weight: bold;
padding-left: 3px;
text-decoration: underline;
content: "Read More >>";
}

/* Start Core Styling */
#slider, ul, li { height: 300px; }
#slider, li { position: relative; width: 500px; }

#slider
{
margin: auto;
overflow: hidden;
/* Non Core */
background: #f6f7f8;
box-shadow: 4px 4px 15px #aaa;
	-o-box-shadow: 4px 4px 15px #aaa;
	-icab-box-shadow: 4px 4px 15px #aaa;
	-khtml-box-shadow: 4px 4px 15px #aaa;
	-moz-box-shadow: 4px 4px 15px #aaa;
	-webkit-box-shadow: 4px 4px 15px #aaa;
border: 1px solid #bcc5cb;
border-width: 1px 2px 2px 1px;
border-radius: 10px;
	-o-border-radius: 10px;
	-icab-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
padding: 10px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) { #slider { border-width: 1px; } }

ul
{
list-style-type: none;
position: absolute;
left: 0px;
top: 0px;
width: 2000px;
-webkit-transition: left .3s linear;
}

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