JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blocks" style="margin-top: 300px;">
<div class='body1'>
    
    <br />
    <br />
      <div class='description1'>
          
      </div>
</div>
<div class='body2'>
   
    <br />
    <br />
      <div class='description2'>
         
      </div>
</div>
<div class='body3'>
   
    <br />
    <br />
      <div class='description3'>
          
      </div>
</div>
</div>

CSS

.description1 { background-color: #00BFFF; display: none; position: absolute; bottom: 0px; width:200px; height:300px; opacity:0.7;}
.body1 { background-color: #EB5788;  position: relative; width:200px; float:left; margin-left: 10px;
    margin-right: 10px;}

.description2 { background-color: #00BFFF; display: none; position: absolute; bottom: 0px; width:200px; height:300px; opacity:0.7;}
.body2 { background-color: #EB5788;  position: relative; width:200px; float:left; margin-left: 10px;
    margin-right: 10px;}

.description3 { background-color: #00BFFF; display: none; position: absolute; bottom: 0px; width:200px; height:300px; opacity:0.7;}
.body3 { background-color: #EB5788;  position: relative; width:200px; float:left; margin-left: 10px;
    margin-right: 10px;}

JavaScript

$(document).ready(function(){
    $('.body1').click(function() {
        $(this).find('.description1').slideToggle('slow');
    });
});    

$(document).ready(function(){
    $('.body2').click(function() {
        $(this).find('.description2').slideToggle('slow');
    });
});    

$(document).ready(function(){
    $('.body3').click(function() {
        $(this).find('.description3').slideToggle('slow');
    });
});