<div class="wrapper new">
  <img class="new" src="https://d3frr45csl69j6.cloudfront.net/books/shliumlE87CNvzTuxH1lJlJmbGv-Cjo-Jm1A-623eRQ/weather-panel/9d49287f14b1f742068babf4e4f48249dce26865/cover.png" />
  <span class="premium"><i class="fa fa-gift"></i></span>
</div>

<div class="wrapper new">
  <img class="new" src="https://d3frr45csl69j6.cloudfront.net/books/shliumlE87CNvzTuxH1lJlJmbGv-Cjo-Jm1A-623eRQ/python-oop/5e099e07a0827c5af80f8b53fe123b9da5696014/cover.png" />
   <span class="premium"><i class="fa fa-gift"></i></span>
</div>

<div class="wrapper new">
  <img class="new" src="https://d3frr45csl69j6.cloudfront.net/books/04fqtc7-6QhLls97aID0g6jDL8bHhR066RZ2qs0vKGo/unicode/696c802d0e18df505b6fa4297950c57adb491807/cover.png" />
    <span class="premium"><i class="fa fa-gift"></i></span>
</div>

<div class="wrapper new pink">
  <img class="new" src="https://d3frr45csl69j6.cloudfront.net/books/04fqtc7-6QhLls97aID0g6jDL8bHhR066RZ2qs0vKGo/unicode/696c802d0e18df505b6fa4297950c57adb491807/cover.png" />
    <span class="premium gold"><i class="fa fa-gift"></i></span>
</div>

<div class="wrapper new">
  <img class="new" src="https://d3frr45csl69j6.cloudfront.net/books/04fqtc7-6QhLls97aID0g6jDL8bHhR066RZ2qs0vKGo/unicode/696c802d0e18df505b6fa4297950c57adb491807/cover.png" />
    <span class="premium gold"><i class="fa fa-gift"></i></span>
</div>
body {
  padding: 40px;
}

.wrapper {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

img {
  width: 150px;
  margin-right: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.new::before {
  content: "NEW";
  position: absolute;
  width: 53px;
  height: 53px;
  background: #f5c905;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  text-align: center;
  line-height: 53px;
  top: -25px;
  left: -25px;
}

.premium {
  position: absolute;
  display: inline-block;
  top: -1px;
  left: 120px;
  color: #fff;  
  background: #ec5366;
  width: 25px;
  height: 25px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.premium::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  border-left: 12.5px solid #ec5366;
  border-right: 12.5px solid #ec5366;
  border-bottom: 8px solid transparent;
}

.gold {
  background: #c2ac6b;
}

.gold::after {
  border-left-color: #c2ac6b;
  border-right-color: #c2ac6b;
}

.pink::before {
  background: #ec5366;
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.