JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo"></div>
<button class="out">out</button>
<button class="in">in</button>

CSS

div{
    height: 100px;
    width: 10px;
    background: red;
    
    transition: width 0s linear;
    -ms-transition: width 0s linear;
    -moz-transition: width 0s linear;
    -webkit-transition: width 0s linear;
    -o-transition: width 0s linear;
}
div.out {
    width: 200px;
    transition: width 2s linear;
    -ms-transition: width 2s linear;
    -moz-transition: width 2s linear;
    -webkit-transition: width 2s linear;
    -o-transition: width 2s linear;
    
}

JavaScript

$('button.out').click(function(){console.log($('#foo').addClass);$('#foo').addClass('out')})
$('button.in').click(function(){$('#foo').removeClass('out')})