JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="box">

</div>
<br/>
<div class="box1">

</div>


<button id="btn"> open</button>
<button id="closeBtn"> close</button>

SCSS

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: .5s;
  &.active {
    width: 200px;
  }  
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  
  &.active {
    width: 200px;
    transition: .5s;
  }  
}

JavaScript

$('#btn').on('click', function() {
$('.box').addClass('active');
$('.box1').addClass('active');
})

$('#closeBtn').on('click', function() {
$('.box').removeClass('active');
$('.box1').removeClass('active');
})