JSFiddle - React, Tailwind, and code Playground

by deswolf

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addOne">Add 1</button>
<div id="wrapper">
  <nav id="homeWrap"></nav>
</div>

SCSS

* {margin:0;padding:0;}
body {font-family:sans-serif;}
button {
  position:absolute;
  top:5px;
  left:5px;
}

#homeWrap {
  width:80%;
  height:80%;
  position:absolute;
  transform:translate(-50%,-50%);
  top:50%;
  left:50%;
  font-size:0;
  > span {
    font-size:14px;
    width:calc(100% / 6 * 2);
    display:inline-block;
    height:calc(100% / 3);
    i {
      margin-right:10px;
      margin-bottom:10px;
      display:inline-block;
      width:calc(100% - 10px);
      height:calc(100% - 10px);
    }
  }
}

span:nth-child(5n+1) {
  margin-left:calc(100% / 6);
}
span:nth-child(5n+2) {
  margin-right:calc(100% / 6);
}

#homeWrap {
    background:rgba(0,0,0,0.1);
    user-select:none;
    > span {
      background:rgba(0,0,0,0.1);
      text-align:center;
      animation:zoomInLeft 0.5s ease-in;
      > i {
        background:rgba(255,0,0,0.2);
        font-style:normal;
        font-weight:bold;
        font-size:22px;
        transition:all .3s ease-in;
        &:hover {
          background:#ad4040;
          cursor:pointer;
          color:white;
        }
      }
    }
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
   ...

JavaScript

(function($){
  init();
})(jQuery);

function init() {
  drawTheTing(2);
  
  $("#addOne").on("click", function() {
    drawTheTing(1);
  });
}





function drawTheTing(no) {
	var nav = $("#homeWrap");
  var number = nav.children().length;
	for (i = 0; i < no; i++) {
  	number++;
  	nav.append(template(number));
  }
}

function template(msg) {
	return "<span><i>" + msg + "</i></span>";
}