JSFiddle - React, Tailwind, and code Playground

HTML

<div id=tasty_pancakes>

  <div id=TP_inner>
    <div id=button></div>
    <div id=TP_inner_left>
      <div>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
      </div>
    </div>
    <div id=TP_inner_right>
      <div id=TP_inner_right_container>
        <h2>Tasty pancakes</h2>
        <h4>season favourite</h4>
        <p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus.</p>

      </div>
    </div>
  </div>
</div>

CSS

#TP_inner_left {
  height: 100%;
  width: 40%;
  /*ИЗОБРАЖЕНИЕ на котором необходимо создать эффект согнутой бумаги*/
  background: url(http://s016.radikal.ru/i335/1706/7e/84b9aae6c8db.png) 55%;
  background-size: cover;
  float: left;
  position : relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 91%); /// важно соблюдать пропорции к изображению
}

#TP_inner_left:after{
  content:'';
  border:11px solid red;
  position:absolute;
  bottom:0;
  left:0;
}

/*КНОПКА*/
#button {
  position: absolute;
  width: 40px;
  height: 40px;
  background: red;
  border-radius: 50px;
  left: 35%;
  top: 35%;
  z-index: 100;
  cursor: pointer;
  border: 2px solid black;
}

#tasty_pancakes {
  background: url(http://i075.radikal.ru/1706/e7/5d47657bcdcdt.jpg) 0% 60%;
  background-size: cover;
  max-width: 1366px;
  width: 100%;
  height: 600px;
  position: relative;
}

#TP_inner {
  height: 250px;
  width: 450px;
  left: 0;
  right: 0;
  margin: 80px auto 0;
  position: absolute;
}

#TP_inner_right {
  height: 100%;
  width: 60%;
  background: url(http://s016.radikal.ru/i337/1706/aa/de0412a499f2.png) 90% 97%, white;
  background-size: 40%;
  background-repeat: no-repeat;
  float: left;
  text-align: center;
  position: relative;
}

#tasty_pancakes h2 {
  font-size: 17px;
  letter-spacing: 2px;
}

#tasty_pancakes h4 {
  font-size: 10px;
  margin-top: 0;
  font-weight: bold;
  color: rgba(164, 125, 94, 1);
  letter-spacing: 2px;
}

#tasty_pancakes p {
  color: rgba(116, 114, 109, 1);
  margin-top: 50px;
  font-size: 7px;
}

#TP_inner_right_container {
  width: 200px;
  margin: 50px auto 0;
  text-align: left;
}