JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://www.google.com/"><img src="http://testp.infinityyazilim.com/IlkayOzturk/img/title_mentor.png" class="back"></a>
    
<a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="absolute clip-polygon"></a>

CSS

img { width: 220px;  margin: 20px; }
img:hover { opacity: 0.5; }

.absolute { position: absolute; top:0px; left: 10px; }
.back { width: 600px; }

.clip-polygon {
  -webkit-clip-path: polygon(0px 150px,200px 150px,100px 0px);
}

body {
  background: linear-gradient(
    to bottom,
    red,
    yellow
  );
}

body, html {
  height: 100%;
}