JSFiddle - React, Tailwind, and code Playground

HTML

<span id="sl_play" class="sl_command">&nbsp;</span>
	<span id="sl_pause" class="sl_command">&nbsp;</span>
	<span id="sl_i1" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i2" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i3" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i4" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i5" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i6" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i7" class="sl_command sl_i">&nbsp;</span>
	<span id="sl_i8" class="sl_command sl_i">&nbsp;</span>
	
	<section id="slideshow">
	
		<a class="commands prev commands1" href="#sl_i8" title="Go to last slide">&lt;</a>
		<a class="commands next commands1" href="#sl_i2" title="Go to 2nd slide">&gt;</a>
		<a class="commands prev commands2" href="#sl_i1" title="Go to 1rst slide">&lt;</a>
		<a class="commands next commands2" href="#sl_i3" title="Go to 3rd slide">&gt;</a>
		<a class="commands prev commands3" href="#sl_i2" title="Go to 2nd slide">&lt;</a>
		<a class="commands next commands3" href="#sl_i4" title="Go to 4th slide">&gt;</a>
		<a class="commands prev commands4" href="#sl_i3" title="Go to 3rd slide">&lt;</a>
		<a class="commands next commands4" href="#sl_i5" title="Go to 5th slide">&gt;</a>
		<a class="commands prev commands5" href="#sl_i4" title="Go to 4th slide">&lt;</a>
		<a class="commands next commands5" href="#sl_i6" title="Go to 6th slide">&gt;</a>
		<a class="commands prev commands6" href="#sl_i5" title="Go to 5th slide">&lt;</a>
		<a class="commands next commands6" href="#sl_i7" title="Go to 7th slide">&gt;</a>
		<a class="commands prev commands7" href="#sl_i6" title="Go to 6th slide">&lt;</a>
		<a class="commands next commands7" href="#sl_i8" title="Go to 8th slide">&gt;</a>		
		<a class="commands prev commands8" href="#sl_i7" title="Go to 7th slide">&lt;</a>
		<a class="commands next commands8" href="#sl_i1" title="Go to 1rst slide">&gt;</a>
		<a class="play_commands pause" href="#sl_pause"...

CSS

body {
	width: 800px;
	margin: 0 auto;
	color:#777;
}
h1, h2 {
	text-align:center;
	margin-top:0;
}
h1 {
	padding: 1em 0;
	margin-left: 1.5em;
	font-size: 2.5em;
	font-family: 'Amaranth', Arial, Verdana, sans-serif;
}
h1 span {
	display:block;
	margin: 0.75em 0 0 -2em;
	line-height: 1em;
	font-size: 0.55em;
}
h1 .cursive {
	margin: 0 0 0 -3em;
	font-size: 1.1em;
	line-height:0.5em;
	color: #bd9b83;
}
figure { 
	display: inline-block; 
}
a {
	text-decoration: none;
	border-bottom: 1px solid #bc9d88;
	color: #8f6b51;
}
a:hover,
a:focus {
	border-bottom: 1px dashed #bc9d88;
}
.sread {
	position: absolute;
	left:-9999px;
}
.cursive {
	font-family: 'Mr Dafoe', cursive;
}
.center {
	text-align: center;
}

#slideshow {
	position: relative;
	width: 640px;
	height: 310px;
	padding: 15px;
	border: 1px solid #ddd;
	margin: 0 auto 2em;
	background: #FFF;
	background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	
	-webkit-border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

/* avanced box-shadow :  http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow  */
#slideshow:before,
#slideshow:after {
	position: absolute;
	display:block;
	bottom:16px;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px...