JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boundry" >
    <div class="arrow_box">
       <h1 class="logo">first image</h1>
    </div>
    <div class="arrow_box">
       <h1 class="logo">second image</h1>
    </div>
</div>

CSS

.boundry{   
    margin-top:100px;
    margin-left:100px;
    width:50%;
    margin-bottom:100px;    
}
.arrow_box {
    height:180px;
	position: relative;
	background: #88b7d5;	  
    padding:15px;     
    text-align:center;    
    color:white;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 46% 80%, 51% 90%, 56% 80%, 0% 80%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 46% 80%, 51% 90%, 56% 80%, 0% 80%);
}
.arrow_box:nth-child(1){         
    background:url('http://3.bp.blogspot.com/-lz3nDbV440A/VO4QpcN4ZCI/AAAAAAAAN94/PAYUtUysb-4/s1600/happy-holi-images-2015%2B(9).jpg');  
    color:grey;
    z-index: 5;
}
.arrow_box:nth-child(2){
    margin-top: -42px;
    margin-bottom: -35px;      
    background:url('http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg');
}