JSFiddle - React, Tailwind, and code Playground

by TrevorBurnham

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box {
  display: inline-block;
  height: 100px;
  background: #333;
}
.box.shrink {
  width: 0px;
  -webkit-transition: width 1s;
  -moz-transition:    width 1s;    
}
.box:not(.shrink) {
  width: 100px;
  -webkit-transition: width 1s;  
  -moz-transition:    width 1s;
}

JavaScript

setInterval(function() {
  $('.box').each(function() {
    var $box = $(this);
    $box.width();
    if (Math.random() > 0.5) {
      $box.addClass('shrink');
    } else {
      $box.removeClass('shrink');  
    };
  });
}, 1000);