JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="dots">
    <div class="dot active">
        <span>1</span>
    </div>
    <div class="dot">2</div>
    <div class="dot">3</div>
</div>
<button>fwef</button>

CSS

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
div.dots {
    width: 100%;
    font-size: 0px;
}
div.dots div.dot {
    border: 1px solid red;
    font-size: 16px;
    display: inline-block;
    width: 381px;
    transition: 1s;
    transform-origin: left;
}
div.dots div.dot.active:nth-child(1){
    transform: scaleX(2);
    transform-origin: left;
}
div.dots div.dot span {
    display: block;
    transition: 1s;
    transform-origin: left;
}
div.dots div.dot.active:nth-child(1) span{
    transform: scaleX(0.5);
    transform-origin: left;
}

JavaScript

$('button').click(function(){
	$('div.dots div.dot:nth-child(1)').toggleClass('active')
})