JSFiddle - React, Tailwind, and code Playground

HTML

<div class="label-wrapper" style="position: absolute; font-family: &quot;Helvetica Neue&quot;; font-weight: 300; color: white; width: 809px; left: 112px;">
   <div id="poi-0" class="poi-wrapper poi-intro" style="height: 100px; position: absolute; font-family: &quot;Helvetica Neue&quot;; font-weight: 300; background: white; color: black;">
      <div class="background-img">
         <svg class="poi-image">
            <defs>
               <clipPath id="clip-triangle">
                  <poligon points="0,0 110,0 110,100 30,100 20,110 10,100 0,100 0,0"></poligon>
               </clipPath>
            </defs>
            <rect class="svg-background" width="110px" height="110px" clip-path="url(#clip-triangle)"></rect>
            <image class="svg-image" width="110px" height="110px" clip-path="url(#clip-triangle)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg"></image>
         </svg>
      </div>
      <div class="intro-content">
         <span class="poi-header">One step away</span><span class="poi-subheading">1 hour and 28 minutes</span>
         <ul class="poi-details">
            <li>3</li>
            <li>4</li>
         </ul>
      </div>
   </div>
</div>

CSS

.poi-wrapper{
  display: flex;
  background: white;
}

.background-img{
  width: 110px;
  height: 110px;
}

.svg-background, .svg-image {
    clip-path: url(#clip-triangle);
}

svg.poi-image {
    position: absolute;
    height: 110px;
    width: 110px;
}

.intro-content{
  vertical-align: top;
  padding-left: 10px;
  padding-right: 5px;
  background: white;
  height: 100px;
}