JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container-fluid banner">
	<div class="row">
		<div class="col-12"> 
			 <div class="slider">	
  <div class="slider-nav">
      <div class="slider-nav-1"></div>
      <div class="slider-nav-2"></div>
      <div class="slider-nav-3"></div>
  </div>
<div class="slider-for">
 	    <div><a href="#"> 
		  <div class="tooltip-slider">
		    <div class="tooltip-slider-1"> <p class="tooltip-slider-text-1">APP OF</br>THE YEAR</p>
		    </div>
			<p class="tooltip-slider-text-2">MY APPS CHOECASE</p>
			<p class="tooltip-slider-text-3">Lorem ipsum is simply dummy text...</p>
			 
		  </div>
		</a>
        </div>
        	    <div><a href="#"> 
		  <div class="tooltip-slider">
		    <div class="tooltip-slider-1"> <p class="tooltip-slider-text-1">APP OF</br>THE YEAR</p>
		    </div>
			<p class="tooltip-slider-text-2">MY APPS CHOECASE</p>
			<p class="tooltip-slider-text-3">Lorem ipsum is simply dummy text...</p>
			 
		  </div>
		</a>
        </div>
		 	    <div><a href="#"> 
		  <div class="tooltip-slider">
		    <div class="tooltip-slider-1"> <p class="tooltip-slider-text-1">APP OF</br>THE YEAR</p>
		    </div>
			<p class="tooltip-slider-text-2">MY APPS CHOECASE</p>
			<p class="tooltip-slider-text-3">Lorem ipsum is simply dummy text...</p>
			 
		  </div>
		</a>
        </div>
		
</div>  
  </div>
  </div>
  </div>
  </div>

CSS

.slider{
  background-color: #0fc6af;
  position: relative;
  width: 500px;
  height: 400px;
}
.slider-nav{
  position: absolute;
  display: inline-block;
  width: 150px;
  right: 0;
}
.slider-nav-1, .slider-nav-2, .slider-nav-3{
  position: relative;
  width: 50px;
  height: 50px;
  float: left;
}
.slider-nav-1{
 background-color: rgba(189,220,222,0.28); 
}
.slider-nav-2{
 background-color: rgba(82,163,167,0.68); 
}
.slider-nav-3{
 background-color: rgba(31,136,142,0.88); 
}
.slider-nav-1::before{
	position: absolute;
	content: "";
	bottom: -17px; left: 15px;
  width: 0;
  height: 0;
  border-top: 17px solid rgba(31,136,142,0.88);
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
 
}