JSFiddle - React, Tailwind, and code Playground

HTML

//Html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <div class="card">
            <div class="inner-card">
                <h5>Title</h5>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
              
                <div class="img-div">
                    <img src="../static/img/search.png" class="card-img" alt="">
                </div>
            </div>
            <p>
            unhide
            </p>
        </div>

CSS

//CSS
.card{
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 350px;
    height: 180px;
    background: lightgreen;
    border: 2px solid black;
    margin-left: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}
.inner-card .active{
    display: none;
} 
.inner-card{
    display: flex;
    flex-direction: column;
    justify-content: end;
    background:rgba(255,165,0,0.5)
}

JavaScript

$(document).ready( function(){
            $('.card').click( function() {
                $(this).find(".inner-card").toggleClass('active');
            });
        });