JSFiddle - React, Tailwind, and code Playground

by ZenMaster

HTML

<div>
    <ul>
        <li><div>1</div></li>
        <li><div>2</div></li>
        <li><div>3</div></li>
        <li><div>4</div></li>
        <li><div>5</div></li>
    </ul>
</div>

CSS

body {
    height: 500px;
}

div {
    background: #333;
    height: 100%;
}

ul {
    height: 100%;
}

li {
    width: 15%;
    height: 20%;
    background: #fff;
    cursor: pointer;
    padding: 0.2em 0.2em 0;
}

li > div {
    height: 100%;
    background: #333;
}

JavaScript

$('li').on('mouseover', function() {
    $(this).css('height', '40%');
    $('li').not(this).css('height', '15%');
});

$('li').on('mouseout', function() {
    $(this).css('height', '20%');
    $('li').not(this).css('height', '20%');
});