JSFiddle - React, Tailwind, and code Playground

by lucaslazaro

HTML

<button class="js_removable">
 Remove last item
</button>

<ul class="transitionable">
  <li class="removable width-1">Content</li>
  <li class="removable width-2">Content</li>
  <li class="removable width-3">Content</li>
  <li class="removable width-4">Content</li>
  <li class="removable width-5">Content</li>
  <li class="removable width-3">Content</li>
  <li class="removable width-2">Content</li>
  <li class="removable width-5">Content</li>
</ul>

CSS

.transitionable {
  transition: all 1s ease-in-out;
  width: 100%;
  background-color: black;
  overflow: hidden;
}

.removable {
  float: left;
  height: 50px;
  border: 1px solid;
  transition: all 0.5s ease-in-out;
}

.removable.hidden { 
  height: 0px;
}

.width-1 {
  width: 25%;
  background-color: white;
}

.width-2 {
  width: 35%;
  background-color: green;
}

.width-3 {
  width: 55%;
  background-color: yellow;
}

.width-4 {
  width: 45%;
  background-color: orange;
}

.width-5 {
  width: 15%;
  background-color: gray;
}

JavaScript

$('.js_removable').click(function () {
	$('.removable:not(.hidden)').last().addClass('hidden');
});