JSFiddle - React, Tailwind, and code Playground

by Yusuf Onur SARI

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" />


<a href="#" title="name" class="reaction-in-box text-center">
    <span>Rate</span>
    <div class="reaction-range" style="height: 50px; bottom: 0;"></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">
        Name
    </div>
</a>


<a href="#" title="name" class="reaction-in-box text-center">
    <span>Rate</span>
    <div class="reaction-range" style="height: 20px; bottom: 0;"></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">
        Name
    </div>
</a>



<a href="#" title="name" class="reaction-in-box text-center">
    <span>Rate</span>
    <div class="reaction-range" style="height: 40px; bottom: 0;"></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">
        Name
    </div>
</a>

CSS

.reaction-box {
    text-align: center;
    padding: 10px;
}
.reaction-box a {
    text-decoration: none;
    font-weight: bold;
    color: #fc5bb6;
}
.reaction-box a:hover {
    opacity: 0.6;
}
.reaction-in-box {
    float: left;
    width: auto;
}
.reaction-range {
    margin: 1px 4px;
    background-color: #fc5bb6;
}
.reaction-description {
    background-color: #f4f6f6;
    padding: 5px;
}
.reaction-description img {
    display: block;
    width: 50px !important;
    height: 50px !important;
    margin: 0 auto 5px auto;
}