JSFiddle - React, Tailwind, and code Playground

by derekmx271

HTML

<section id="slider">
  <ul>
    <li class="active"><img src="http://www.cs7tutorials.com/img/slide1.jpg" alt="Valentine's Day Special"></li>
    <li><img src="http://www.cs7tutorials.com/img/slide2.jpg" alt="Perrin"></li>
    <li><img src="http://www.cs7tutorials.com/img/slide3.jpg" alt="K&N Typhoon Cold Air Intake"></li>
  </ul>
</section>

<section>
    Some more text
</section>

CSS

#slider {
	width:80%;
	max-width:800px;
	margin:0 auto;
}

#slider ul {
	margin:0px;
	padding:0px;
	list-style:none;
	width:100%;
	position:relative;
}

#slider ul li {
	width:100%;
	position:absolute;
	top:0px;
}

#slider img {
	width:100%;
	box-shadow:0px 20px 40px rgba(0,0,0,.66);
}

#slider li.active {
	z-index:1;
}

#slider ul:after {
    content: url(http://www.cs7tutorials.com/img/slide1.jpg);
    display: block;
    position:relative;
    width:70px;
}

JavaScript

$(document).ready(function(){
    slider();
});

function slider(){
    
}