JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b-slider">
    <div class="b-slider-inner">
        <div class="b-slide b-slide-active">
            <h3>slide 1</h3>
        </div>
        <div class="b-slide">
            <h3>slide 2</h3>
        </div>
        <div class="b-slide">
            <h3>slide 3</h3>
        </div>
        <div class="b-slide">
            <h3>slide 4</h3>
        </div>
    </div>
    <ul class="b-slider-pagination">
        <li class="pagination-active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* slider */
.b-slider{
    font-family: 'Calibri', sans-serif;
    max-width: 800px;
    margin: 0px auto;
    padding: 15px;
}
.b-slider-inner {    
    position: relative;
    padding-bottom: 56.25%;    
    background: #f5f5f5;
    overflow: hidden;
}
.b-slide {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
    background: #ddd;
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    -webkit-transition: 0.5s;
    transition: 0.5s;    
}
.b-slide:nth-of-type(1) {    
background: rgb(200,49,62); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(200,49,62,1) 0%, rgba(200,49,62,1) 75%, rgba(74,166,87,1) 75%, rgba(74,166,87,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(200,49,62,1) 0%,rgba(200,49,62,1) 75%,rgba(74,166,87,1) 75%,rgba(74,166,87,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(200,49,62,1) 0%,rgba(200,49,62,1) 75%,rgba(74,166,87,1) 75%,rgba(74,166,87,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8313e', endColorstr='#4aa657',GradientType=0 ); /* IE6-9 */
 }
.b-slide:nth-of-type(2) {   
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 33%, rgba(0,57,166,1) 33%, rgba(0,57,166,1) 67%, rgba(213,43,30,1) 67%, rgba(213,43,30,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 33%,rgba(0,57,166,1) 33%,rgba(0,57,166,1) 67%,rgba(213,43,30,1) 67%,rgba(213,43,30,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 33%,rgba(0,57,166,1) 33%,rgba(0,57,166,1) 67%,rgba(213,43,30,1) 67%,rgba(213,43,30,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+...

JavaScript

$(document).ready(function() {	 	
        
    $('.b-slide').first().addClass('b-slide-active');
    
    $('.b-slider-pagination').find('li').click(function(){ 
   		 $('.pagination-active').removeClass('pagination-active');
         $(this).addClass('pagination-active');        
    });      
    
    $('.b-slider-pagination').find('li').eq(0).click(function(){   	
         $('.b-slide').removeClass('b-slide-active');
         $('.b-slide').eq(0).addClass('b-slide-active');           
    });
    $('.b-slider-pagination').find('li').eq(1).click(function(){   	
         $('.b-slide').removeClass('b-slide-active');
         $('.b-slide').eq(1).addClass('b-slide-active');       
    });
	$('.b-slider-pagination').find('li').eq(2).click(function(){   	
         $('.b-slide').removeClass('b-slide-active');
         $('.b-slide').eq(2).addClass('b-slide-active');        
    });    
    $('.b-slider-pagination').find('li').eq(3).click(function(){   	
         $('.b-slide').removeClass('b-slide-active');
         $('.b-slide').eq(3).addClass('b-slide-active');        
    });
    
});