JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<ul>
    <li >Item 1</li>
	<li >Item 1</li>						
	<li >Item 1</li>					
</ul>

CSS

ul {
    display: block; clear: both;
    width:900px;
}

ul li {
    display: block; float: left;
    width: 60px; height: 60px; margin-left: 10px;
    background-color: blue; color: white; cursor: pointer;
}

ul li.active {
    width: 360px; background-color: red;
}

JavaScript

$('ul li:nth-child(2)').addClass('active');

$('ul').on({
    mouseenter:function() {
        if(!$(this).hasClass('active')){
            $('.active')
                .stop()
                .animate({width:60},250, function(){
                    $(this).removeClass('active');
                });
            $(this)
                .addClass('active')
                .stop()
                .animate({width:360},250,function(){
                    $(this).addClass('active');
                });
        }
    },
    mouseleave:function () {
			//mouseout action
    }
},'li');