JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<body style="">
<button type="button" id="delete">delete</button>
<button type="button" id="add">add</button>
<footer class="footer mt-auto py-3 bg-light">
<div class="card-deck ml-0 mr-0 h-100">
  <div class="card notification"></div>
  <div class="card notification"></div>
  <div class="card notification"></div>
  <div class="card notification"></div>
</div>
</footer>

SCSS

$cardWidth: 100px;
.footer {
  height: 150px + 16px * 2;
  .card-deck {
    overflow: hidden;
    flex-flow: initial;
    padding-left: $cardWidth + 15px;
    transition: padding-left 0.5s;

    &:empty {
      padding-left: 0;
    }

    .card {
      max-width: $cardWidth;
      min-width: $cardWidth;
      margin-left: 30px;
      margin-right: 0;
      transition: margin-left 0.5s;

      &:first-child {
        margin-left: -$cardWidth;
      }
    }
  }
}

JavaScript

$('#delete').click(function (e) {
        $(".notification:first-child").remove();
    });

$('#add').click(function (e) {
        $(".card-deck").append("<div class='card notification'></div>");
});