JSFiddle - React, Tailwind, and code Playground

HTML

<section id="slider">
  <ul>
    <li class="active"><img src="https://i.kym-cdn.com/photos/images/facebook/001/217/729/f9a.jpg" alt="Valentine's Day Special"></li>
    <li><img src="https://i.kym-cdn.com/photos/images/facebook/001/217/729/f9a.jpg" alt="Perrin"></li>
    <li><img src="https://i.kym-cdn.com/photos/images/facebook/001/217/729/f9a.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:"";
    display: block;
    position: relative;
    width: 50%;
    max-width:500px;
    background:url(https://i.kym-cdn.com/photos/images/facebook/001/217/729/f9a.jpg) no-repeat;
    background-size:100% auto;
}

JavaScript

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

function slider(){
    
}