JSFiddle - React, Tailwind, and code Playground
HTML
<div class="competition-podium">
<div class="podium-block bronze"> <span class="place">3st place</span>
<span class="sum">$1000</span>
<span class="name">Oliver Taylor</span>
<div class="podium"></div>
</div>
<div class="podium-block gold"> <span class="place">1st place</span>
<span class="sum">$5000</span>
<span class="name">Jacob Collins</span>
<div class="podium"></div>
</div>
<div class="podium-block silver"> <span class="place">2st place</span>
<span class="sum">$3000</span>
<span class="name">Peter Gill</span>
<div class="podium"></div>
</div>
</div>
CSS
.competition-podium {
margin: 0 auto 10px;
width: 660px;
height: 250px;
position: relative;
}
.competition-podium .podium-block {
width: 209px;
text-align: left;
display: inline-block;
position: absolute;
bottom: 0;
}
.competition-podium .podium-block .place {
font-size: 22px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
}
.competition-podium .podium-block .sum {
font-size: 75px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
line-height: 70px;
}
.competition-podium .podium-block .name {
font-size: 20px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
line-height: 20px;
display: block;
width: 100%;
height: 20px;
text-align: center;
position: absolute;
bottom: 20px;
z-index: 10;
opacity: 0;
}
.competition-podium .podium-block.bronze {
color: #e6d6bf;
left: 0;
}
.competition-podium .podium-block.bronze .podium {
background: #e6d6bf;
height: 0px;
}
.competition-podium .podium-block.bronze .name {
color: #856e4e;
}
.competition-podium .podium-block.gold {
color: #ead679;
left: 225px;
}
.competition-podium .podium-block.gold .podium {
background: #ead679;
height: 0px;
}
.competition-podium .podium-block.gold .name {
color: #978325;
}
.competition-podium .podium-block.silver {
color: #cbd9de;
left: 451px;
}
.competition-podium .podium-block.silver .podium {
background: #cbd9de;
height: 0px;
}
.competition-podium .podium-block.silver .name {
color: #5e818e;
}
JavaScript
$(document).ready(function () {
function podiumAnimate() {
$('.bronze .podium').animate({
"height": "62px"
}, 1500);
$('.gold .podium').animate({
"height": "195px"
}, 1500);
$('.silver .podium').animate({
"height": "106px"
}, 1500);
$('.competition-container .name').delay(1000).animate({
"opacity": "1"
}, 500);
}
podiumAnimate();
});