JSFiddle - React, Tailwind, and code Playground

HTML

<section></section>

<div class="add">Add</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.18/chance.min.js"></script>

CSS

card {
  transform: translateX(-100%);
  opacity: 0;
}

card.shown {
  transform: translateX(0);
  opacity: 1;
}









/* Unrelated */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  margin: 0;
  height: 100vh;
  background: linear-gradient(45deg, deeppink, beige);
  font: 100 16px 'Segoe UI', sans-serif;
  user-select: none;
}

section {
  position: relative;
  min-height: 4.5em;
  width: 300px;
  max-height: 60%;
  padding: 0.5em;
  border-radius: 1em;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  transition: 0.25s;
  overflow: hidden auto;
}

card {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 1em;
  padding-right: 2em;
  background: #fff;
  margin: 0.5em;
  border-radius: inherit;
  transition: 0.25s;
}

.close-btn {
  position: absolute;
  top: 1em;
  right: 1em;
  display: flex;
  width: 1.25em;
  height: 1.25em;
  border-radius: 100%;
  background: rgb(255, 59, 48);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: 0.25s;
}

.close-btn::after {
  content: '';
  width: 60%;
  height: 1px;
  background: #fff;
}

card:hover .close-btn {
  opacity: 1;
}

.add {
  --color: #fff;

  position: relative;
  padding: 0.25em 2em;
  padding-right: 3em;
  border: 1px solid #fff;
  color: var(--color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1em;
  transition: 0.25s;
  cursor: pointer;
}

.add::after,
.add::before {
  content: '';
  height: 1px;
  width: 0.5em;
  position: absolute;
  background: var(--color);
  right: 1em;
  transition: 0.25s;
  opacity: 0.7;
}

.add::before {
  transform: rotate(90deg);
}

.add:hover {
  --color: #000;

  background: #fff;
  color: var(--color);
}

::-webkit-scrollbar {
  width: 5px;
  background-color: #999;
}

::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 1em;
}

JavaScript

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

function hideCard(card) {
	card.classList.remove('shown');
  setTimeout(function() {
  	card.remove();
  }, 250);
}

function createCard() {
  let card = document.createElement('card');
  card.textContent = chance.sentence();
  
  let btn = document.createElement('div');
  btn.className = 'close-btn';
  btn.addEventListener('click', function() {
    hideCard(this.parentNode);
  });
  
  card.appendChild(btn);
  $('section').appendChild(card);
  setTimeout(function(){
  	card.classList.add('shown')
  }, 250);
}

$('.add').addEventListener('click', function() {
  createCard();
});