JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="item">
    <div class="block2">
        
    </div>
    <div class="block">
    
    <div class="info">
           My info
    </div>
    </div> 
</div>

CSS

.item {
    background: #ccc;
  width: 300px;
    height: 300px;
}
.block {
    height: 50px;
    background: red;
    width: 100%;
}

.block2 {
    height: 50px;
    background: gray;
    width: 100%;
}
.info{
    background: green;
    height: 20px;
    width: 100%;
}

JavaScript

jQuery(document).ready(function($) {
    $(".item").click(function(){
        $(this).find('.info').animate({ marginTop: '-50px' }, 1000);
    });
});