JSFiddle - React, Tailwind, and code Playground

by Lenggo007

HTML

<!--Based on the example from https://cssanimation.rocks/list-items/ -->

<ul id="list" class="slide-fade">
  <li class="show plus">List item <br/>extra</li>
  <li class="show">List item</li>
</ul>
<button id="add-to-list">Add a list item</button>

CSS

li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}

li.show {
  height: 2em;
  margin: 2px 0;
}

.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}
.slide-fade li.show {
  opacity: 1;
}

.hide {
  opacity: 0;
  
}
/*li.plus {
  height: 6em;
}*/

JavaScript

/*
 * Add items to a list - from cssanimation.rocks/list-items/
 */
document.getElementById('add-to-list').onclick = function() {
  var list = document.getElementById('list');
  var newLI = document.createElement('li');
  newLI.innerHTML = 'A new item';
  newLI.onclick = Remover;
  list.appendChild(newLI);
  setTimeout(function() {
    newLI.className = newLI.className + " show";
  }, 10);
}

//function() Remover{

var t = document.getElementsByTagName('li');

for(var i = 0; i < t.length; i++)
{
	var item = t[i];
  item.onclick = Remover;
}
//}

function Remover() {
	this.className += ' hide';
	this.classList.remove('show');
 
}