JSFiddle - React, Tailwind, and code Playground

by krustnic

HTML

<div class="container">
  <div class="image">
    <img src="//avatars.mds.yandex.net/get-ott/1672343/2a00000169903e8aa7dbe1039672b7bd9d1b/170x255" data-rating="6.8" alt="">
  </div>
  <div class="rating">
    6.8
  </div>
  <div>Name</div>
</div>

<div class="container">
  <div class="image">
    <img src="//avatars.mds.yandex.net/get-ott/1672343/2a00000169903e8aa7dbe1039672b7bd9d1b/170x255" data-rating="6.8" alt="">
  </div>
  <div class="rating">
    6.8
  </div>
  <div>Name</div>
</div>

CSS

.container {
  position: relative;
  display: inline-block;
}

.image {
  width: 150px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image::after {
  display: block;
  content: "123";
  background-color: yellow;
  color: black;
  position: absolute;
  top: 10px;
  left: -4px;
}

.rating {
  background-color: yellow;
  display: inline;
  padding: 2px 4px;
  position: absolute;
  top: 20%;
  right: 0;
}