JSFiddle - React, Tailwind, and code Playground

by chintansoni

HTML

<div id="header">
    <div class="box"></div>
    <div class="box active"></div>
    <div class="box"></div>
</div>

CSS

#header {
    list-style:none;
    width:500px;
    height:250px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#ebebeb;
}
.box {
    width:100px;
    height:100px;
    position:absolute;
    left:0;
    top:75px;
    background:black;
    opacity:0.3;
}
.box:nth-of-type(2) {
    width: 250px;
    height: 250px;
    top: 0;
    left: 125px;
    opacity: 1;
}
.box:last-of-type {
    left: 400px;
}

JavaScript

// for box highlight
$('.box').click(function () {
    if ($(this).css('left') == '0px') {
        $(this).animate({
            width: 250,
            height: 250,
            left: 125,
            top: 0,
            opacity: 1
        }, 400);
        $('.active').animate({
            width: 100,
            height: 100,
            left: 0,
            top: 75,
            opacity: 0.3
        }, 400);
    } else if ($(this).css('left') == '400px') {
        $(this).animate({
            width: 250,
            height: 250,
            left: 125,
            top: 0,
            opacity: 1
        }, 400)
        $('.active').animate({
            width: 100,
            height: 100,
            left: 400,
            top: 75,
            opacity: 0.3
        }, 400);
    }
    $('#header > .box').removeClass('active');
    $(this).addClass('active');
});