JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="number-38" class="images">
<img src="https://pronewz.files.wordpress.com/2015/12/tantrum-charger-7ad0f2416f0e8b5c1f-465-349-2-95-1.jpg" alt="" /></a>
</div>
<div id="number-37" class="images">
<img src="https://pronewz.files.wordpress.com/2015/12/tantrum-charger-7ad0f2416f0e8b5c1f-465-349-2-95-1.jpg" alt="" /></a>
</div>
<div id="number-36" class="images">
<img src="https://pronewz.files.wordpress.com/2015/12/tantrum-charger-7ad0f2416f0e8b5c1f-465-349-2-95-1.jpg" alt="" /></a>
</div>
<div id="number-35" class="images">
<img src="https://pronewz.files.wordpress.com/2015/12/tantrum-charger-7ad0f2416f0e8b5c1f-465-349-2-95-1.jpg" alt="" /></a>
</div>
<p align="center">
<!-- <p align="center" style="display: inline-block; width:150p-->
<a href="" id="show-aps" class="btndown"></a>
<!-- </p> -->
</div>
CSS
body{
margin:100px;
}
#wrapper { width:960px; margin:30px auto; }
a.btndown{
clear: both;
height:40px;
width: 30px;
padding:0px 0px;
color:#ffffff;
background-color:#007bff;
/*position:relative;*/
display:inline-block;
}
a.btndown:after{
clear: both;
position:relative;
bottom:-60px;
left:-15px;
content:" ";
width: 0px;
height: 0px;
border-style: solid;
border-width: 30px 30px 0px 30px;
border-color: #007bff transparent transparent transparent;
}
.images { position: relative; width: 465px; }
.images p { position: absolute; left: 0; bottom: 0; padding: 10px; width: 405px; color: #FFF; margin-left: 0px; margin-bottom: 4px;color: #FFFFFF; }
#number-35 { margin-top:30px; margin-bottom:0px; float:right; }
#number-36 { margin-top:30px; margin-bottom:0px; float:left; }
#number-37 { margin-top:30px; margin-bottom:0px; float:right; }
#number-38 { margin-top:30px; margin-bottom:0px; float:left; }