JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="item left">1</div>
    <div class="item left">2</div>
    <div class="item left">3</div>
    <div class="item left">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
</div>

CSS

.row {
    height: 150px;
    background: blue;
    width: 100%;
}

.item {
    float: left;
    padding: 2.5px;
    color: white;
    width: 9.4%;
    height: 100%;
    background: red;
    margin: 0 0.3%;
    box-sizing: border-box;
    transition: 0.7s linear;
}

.active {
    color: black;
    background: yellow;
}

JavaScript

function setWidth(){
    if($(".item").hasClass("active")){
        $(".item").width("6%");
        $(".active").width("40%");
    };
}

$(".item").click(function(){
	$(".item").removeClass("active");
    $(this).addClass("active");
    
    setWidth();
})