JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="buttons" id="next"></div>
    <ul>
      <li><div class="im"><img src="your image.jpg"></div><div class="text">1</div></li>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eos illum nisi, illo quis impedit? Maxime voluptas provident asperiores dolore placeat officiis, iusto. Labore voluptate officiis non similique aut magnam.
      </p>
      <li><div class="im"><img src="your image.jpg"></div><div class="text">2</div></li>
      <li><div class="im"><img src="your image.jpg"></div><div class="text">3</div></li>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eos illum nisi, illo quis impedit? Maxime voluptas provident asperiores dolore placeat officiis, iusto. Labore voluptate officiis non similique aut magnam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eos illum nisi, illo quis impedit? Maxime voluptas provident asperiores dolore placeat officiis, iusto. Labore voluptate officiis non similique aut magnam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eos illum nisi, illo quis impedit? Maxime voluptas provident asperiores dolore placeat officiis, iusto. Labore voluptate officiis non similique aut magnam.
      </p>
      <li><div class="im"><img src="your image.jpg"></div><div class="text">4</div></li>
      <li><div class="im"><img src="your image.jpg"></div><div class="text">5</div></li>  	
  </ul>
     <div class="buttons" id="prev"></div>
</div>

CSS

*{
	margin: 0px;
	padding:0px;
}

#container{
	margin:30px auto;
	height: 270px;
	width: 300px;
	position:relative;
	background-color: #09C;
	border:4px solid #09C;
}

.buttons{
	position:absolute;
	z-index:100;
	width:60px;
	height:30px;
	left:50%;
	margin-left:-30px;
	
}

#prev{
	top:0px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 30px 30px 0 30px;
	border-color: #287AA2 transparent transparent transparent;
}

#next{
	bottom:0px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 30px 30px 30px;
	border-color: transparent transparent #287AA2 transparent;
}

ul{
	height: 200px;
	overflow: hidden;
	position: absolute;
	top:35px;
	left:10px;
}

li{
	background-color: #287AA2;
	float: left;
	height: 100px;
	width: 280px;
	list-style-type: none;
	margin-bottom:4px;
	position:relative;
}

li .im{
	position:absolute;
	top:25px;
	left:5px;
	background-color: #005279;
	height: 50px;
	width: 50px;
	border-radius:50px;
	border:1px solid #033067;
	overflow:hidden;
}

li .text{
	position:absolute;
	top:0px;
	left:60px;
	height: 100%;
	background-color: #287AA2;
	width: 216px;
	border-left:4px solid #09C;
}

JavaScript

$('#prev').click(function(){
		$('li:last').detach().prependTo('ul').css({'margin-top':'-=100px'})
		$('li:first').stop().animate({'margin-top':'0px'},1000)
	})

	$('#next').click(function(){
		$('li:first').stop().animate({'margin-top':'-=100px'},1000,function(){
			$(this).detach().css({'margin-top':'0px'}).appendTo('ul')
			})
	})