JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <header>
    <h3 class="title">Title</h3>
  </header>
  <img class="img" src="http://gloimg.gearbest.com/gb/pdm-product-pic/Electronic/2016/04/26/grid-img/1475001655142460711.jpg" alt="">
  <foter>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo voluptas deserunt dolor</p>
  </foter>
  <div class="discount">50%<span>off</span></div>
</div>

SCSS

.wrap {
  position: relative;
  width: 300px;
  margin: 50px auto;
  background: #B6C9E7;
  .title {
    text-align: center;
  }
  .img {
    display: block;
    margin: 10px auto;
  }
  .text {
    text-align: center;
  }
  .discount {
    position: absolute;
    right: 5px;
    top: 5px;
    height: 30px;
    width: 30px;
    background: #CD846A;
    border-radius: 50%;
    padding: 10px;
    color: #fff;
    span {
      display: block;
      padding-left: 5px;
    }
  }
}