JSFiddle - React, Tailwind, and code Playground

by Oleh Kotsubko

HTML

<div class="body">
  <div class="body__wrapper">
    <img src="https://static-prod.weplay.tv/2021-07-15/5f8f545ea0c33bf7a0a7327c506c9d58.60313D-D1BCD1-A1A0B7.png" alt="team logo" class="body__image">
  <div class="body__title">Title</div>
  <div class="body__mask"></div>
  </div>
</div>

SCSS

.body {
  font-family: sans-serif;
  color: #fff;
  width: 300px;
 
  
  &__image {
    width: 100%;
    height: 300px;
    object-fit: contain;
  }
  
  &__title {
    background: #000;
    text-align: center;
    font-size: 50px;
  }
  
  &__wrapper {
    
  }
  
  &__mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20%;
    clip-path: polygon(50% 40%, 100% 80%, 100% 100%, 0 100%, 0 80%);
  }
}