JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="wrapper">
  <button>test</button>
  <div class="test one">dedi</div>
  <div class="test two">dedi</div>
  <div class="test three">dedi</div>  
</div>

CSS

.wrapper {
  margin: 100px;
  position:relative;
}

.test {
  position: absolute;
  top: 0;
  left:0;
  background: red;
  padding: 10px;
  color:white;
  transition: all .3s;
  opacity: 0;
}

.one {
  transform: translate(-97px,-62px);
}
.two {
  transform: translate(-61px,-96px)
}
.three {
  transform: translate(-108px,-14px)
}

.show{
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: .5s;
  @keyframes fadeInOpacity {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 0;
    }
    50% {
      opacity: .5;
    }
    100% {
      opacity: 1;
    }
  }
}

JavaScript

$('button').click(function(){
	$(".test").toggleClass('show')
})