JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slideshow">
    <div id="one" class="promotion">
        <p>Lorem Ipsum Dolor Sit Amer
            <a href="#">Link</a>
        </p>
        <img src="http://www.placehold.it/100x300" />        
    </div> 
    <div id="two" class="promotion">
        <p>Lorem Ipsum Dolor Sit Amer
            <a href="#">Link</a>
        </p>
        <img src="http://www.placehold.it/100x300" />      
    </div>      
    <div id="three" class="promotion">
        <p>Lorem Ipsum Dolor Sit Amer
            <a href="#">Link</a>
        </p>
        <img src="http://www.placehold.it/100x300" />    
    </div>     
</div>

CSS

.slideshow {width:630px; height:400px; display:block; overflow:hidden;}
.slideshow #one p {background:red; height:300px; width:300px; float:left;}
.slideshow #two p {background:blue; height:300px; width:300px; float:left;}
.slideshow #three p {background:green; height:300px; width:300px; float:left;}
.slideshow #one img {float:right; position:absolute; bottom:-300px;}
.slideshow #two img {float:right; position:absolute;bottom:-300px;}
.slideshow #three img {float:right; position:absolute;bottom:-300px;}
.slideshow .promotion {display:none;}
.slideshow #one {display:block; position:absolute; top:0; left:0;}
.slideshow #two {display:none;position:absolute; top:0; left:0;}
.slideshow #three {display:none;position:absolute; top:0; left:0;}

JavaScript

$(document).ready(function(){
    
    
    $("#one").fadeIn('slow', function() {
        $("#one").fadeOut('slow');
      }
    );

 
})