JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div class="wrapper">
    <div class="blok" id="a"></div><div class="blok" id="b"></div><div class="blok" id="c"></div>
</div>

CSS

.wrapper {
    white-space: nowrap;
}
.blok {
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    height: 200px;
    width: 300px;
    display: inline-block;
    vertical-align: top;
}
#a {
    background-color: green;
}
#b {
    background-color: blue;
}
#c {
    background-color: purple;
}

JavaScript

$(document).ready(function () {
    $(".blok").hover(function () {
        $(this).stop().animate({
            'height': '400px'
        }, 100);

    }, function () {
        $(this).stop().animate({
            'height': '200px'
        }, 100);
    });

});