JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <h1>AK-47</h1>
  <img src="https://i.imgur.com/tiwEg6m.jpg" alt="AK47" />
  <div class="collection">
    <div id="sand">
      <div class="tooltip">
        <span class="tooltiptext">800 kills</span>
      </div>
    </div>
    <div id="dragon"></div>
    <div id="splinter"></div>
    <div id="tiger"></div>
    <div id="jungle"></div>
    <div id="reptile"></div>
    <div id="gold"></div>
    <div id="platinum"></div>
    <div id="demas"></div>
 </div>
</div>
<div>
  <h1>M13</h1>
  <img src="https://i.imgur.com/tiwEg6m.jpg" alt="AK47" />
  <div class="collection">
    <div id="sand">
      <div class="tooltip">
        <span class="tooltiptext">800 kills</span>
      </div>
    </div>
    <div id="dragon"></div>
    <div id="splinter"></div>
    <div id="tiger"></div>
    <div id="jungle"></div>
    <div id="reptile"></div>
    <div id="gold"></div>
    <div id="platinum"></div>
    <div id="demas"></div>
 </div>
</div>

CSS

html {
  background-color: black;
}

h1 {
  color: black;
}

img {
  width: 500px;
  height: 300px;
}

.collection {
  position: relative;
  color: white;
  display: flex;
}

.collection :hover {
  transform: scale(1.5);
  transition: ease-in-out;
}

.collection #gold {
  height: 50px;
  width: 50px;
  margin-right: 5px;
  background-color: gold;
}

.collection #platinum {
  height: 50px;
  width: 50px;
  margin-right: 5px;
  background-color: silver;
}

.collection #demas {
  height: 50px;
  width: 50px;
  background-image: url(https://i.imgur.com/PKzYg4x.png);
}

.collection #sand {
  height: 50px;
  width: 50px;
  margin-right: 5px;
  background-image: url(https://i.imgur.com/LEZeU2t.png);
}

.collection #dragon {
  height: 50px;
  width: 50px;
  margin-right: 5px;
  background-image: url(https://i.imgur.com/JTBFsB9.png);
}

.collection #splinter {
  height: 50px;
  width: 50px;
  margin-right: 5px;
  background-image: url(https://i.imgur.com/P5hODp5.png);
}

.collection #tiger {
  height: 50px;
  width: 50px;
  margin-right: 5px;
  background-image: url(https://i.imgur.com/f8BimaK.png);
}

.collection #jungle {
  height: 50px;
  width: 50px;
  margin-right: 5px;
  background-image: url(https://i.imgur.com/wLLV7ty.png);
}

.collection #reptile {
  height: 50px;
  width: 50px;
  margin-right: 5px;
  background-image: url(https://i.imgur.com/GOCuOUA.png);
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 999;
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.collection .tooltip:hover .tooltiptext {
 ...