JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />

<div class="clearfix">
  <a href="#" class="reaction text-center">
  <span>Rate</span>
  <div class="reaction-range">
    <div class="reaction-value" style="height: 15px;"></div>
  </div>
  <div class="reaction-description">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
  Falan
  </div>
</a>
  <a href="#" class="reaction text-center">
  <span>Rate</span>
  <div class="reaction-range">
    <div class="reaction-value" style="height: 42px;"></div>
  </div>
  <div class="reaction-description">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
  Falan
  </div>
</a>
  <a href="#" class="reaction text-center">
  <span>Rate</span>
  <div class="reaction-range">
    <div class="reaction-value" style="height: 35px;"></div>
  </div>
  <div class="reaction-description">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
  Falan
  </div>
</a>
</div>

CSS

.reaction{
  width: 60px;
  float: left;
}

.reaction .reaction-range{
  height: 50px;
  width: 50px;
  margin: 0px 4px;
  position: relative;
}
.reaction .reaction-range .reaction-value {
    background-color: gray !important;
    width: 100% !important;
    position: absolute;
    bottom: 0;
}
.reaction .reaction-description {
    background-color: #f4f6f6;
    padding: 5px;
}
.reaction .reaction-description img {
    display: block;
    width: 50px;
    height: 50px;
}