JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg">
  
  <div class="item1">
    
    <div class="img"></div>
    <p>Ярмольник<br>Леонид</p>
    
    
  </div>
  
  
  <div class="item2">
    
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione pariatur architecto praesentium laborum voluptates inventore eveniet nulla illum laudantium mollitia reprehenderit adipisci, at possimus ipsa hic obcaecati natus, porro perferendis.</p>
    
  </div>
  
</div>

CSS

#bg {
  
  width: 370px;
  height: 450px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.2);
  
  
}


.item1 {
  
  width: 100%;
  height: 200px;
  background-color: #8BBF13;
  position: relative;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  
}

.img {
  
  background: url('https://i.imgur.com/CTOnm0g.png') no-repeat;
   background-position: 100%;
  background-size: cover;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  position: absolute;
  top: -26px;
  left: -26px;
  display: flex;
}


.img:after {
  
  content: 'Актёр';
  position: absolute;
  top: 133px;
  left: 207px;
  color: white;
  font-size: 18px;
  
}


.item1 p {
  
  color: white;
  font-size: 25px;
  font-weight: bold;
  margin-right: 60px;
  
}




.item2 {
  
  width: 100%;
  height: 250px;
  background-color: #E4FBC5;
  position: relative;
  display: flex;
  justify-content: center;
  
}


.item2:before {
  
  content: '';
  position: absolute;
  top: -30px;
  left: 35%;
  border: 30px solid transparent;
  border-bottom: 30px solid #E4FBC5;
  border-left: 39px solid #E4FBC5;
  transform: skew(20deg);
  
}


.item2 p {
  
  width: 80%;
  z-index: 2;
  font-size: 16px;
  font-family: Arial;
  margin-top: 25px;
  
}