JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<script src="http://line25.com/wp-content/uploads/2011/jquery-slideshow/demo/js/jquery.scrollTo.js"></script>
<script src="http://line25.com/wp-content/uploads/2011/jquery-slideshow/demo/js/jquery.localscroll.js"></script>
<script src="http://line25.com/wp-content/uploads/2011/jquery-slideshow/demo/js/scripts.js"></script>

<div id="slideshow">
	<ul>
        <li id="lambo1"><a><img src="http://line25.com/wp-content/uploads/2011/jquery-slideshow/demo/images/lambo1.jpg" alt="Green Lamborghini" /></a></li>
		<li id="lambo2"><a><img src="http://line25.com/wp-content/uploads/2011/jquery-slideshow/demo/images/lambo1.jpg" alt="Green Lamborghini" /></a></li>
		<li id="lambo3"><a><img src="http://line25.com/wp-content/uploads/2011/jquery-slideshow/demo/images/lambo1.jpg" alt="Green Lamborghini" /></a></li>
		<li id="lambo4"><a><img src="http://line25.com/wp-content/uploads/2011/jquery-slideshow/demo/images/lambo1.jpg" alt="Green Lamborghini" /></a></li>
		<li id="lambo5"><a><img src="http://line25.com/wp-content/uploads/2011/jquery-slideshow/demo/images/lambo1.jpg" alt="Green Lamborghini" /></a></li>
	</ul>
</div>

<div id="slideshow-nav">
	<ul>
		<li><a href="#lambo1">See the green Lamborghini</a></li>
		<li><a href="#lambo2">See the white Lamborghini</a></li>
		<li><a href="#lambo3">See the grey Lamborghini</a></li>
		<li><a href="#lambo4">See the green Lamborghini</a></li>
		<li><a href="#lambo5">See the yellow Lamborghini</a></li>
	</ul>
</div>

CSS

* {
    margin:0;
    padding:0;
}

#slideshow {
    width: 918px;
    height: 546px;
    overflow-x: scroll;
    overflow-y: hidden;
    margin: 100px auto 50px auto;
    box-shadow: 0px 0px 80px #000;
    -moz-box-shadow: 0px 0px 80px #000;
    -webkit-box-shadow: 0px 0px 80px #000;
}
#slideshow ul {
    width: 4590px;
    list-style: none;
}
#slideshow ul li {
    float: left;
}
#slideshow-nav {
    width: 300px;
    margin: 0 auto 200px auto;
    visibility: hidden;
}
#slideshow-nav ul {
    list-style: none;
}
#slideshow-nav ul li {
    float: left;
}
#slideshow-nav ul li a {
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    margin: 0 10px;
    background-color: #fff;
    text-indent: -9999px;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    box-shadow: 0px 0px 30px #000;
    -moz-box-shadow: 0px 0px 30px #000;
    -webkit-box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
    background-color: #a89d8a;
}
a {
	outline: none;
}
a:focus {
	background-color: #a89d8a;
}