JSFiddle - React, Tailwind, and code Playground

by Victor Stodell

HTML

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<div>
  <div class="button">
    Booking
  </div>
  <div class="booking" onclick="javascript: bookingClick();">
    Booking content
  </div>
</div>

CSS

.booking {
  position: absolute;
  top: 200px;
  left: 100px;
  background: blue;
  color: white;
  width: 150px;
  height: 150px;
  padding: 10px;
}

.button {
  position: absolute;
  top: 50px;
  right: 50px;
  background: gray;
  padding: 10px;
  width: 100px;
  height: 20px;
}

@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1, 0.1) translate3d(500px, -500px, 0);
    transform: scale(0.1, 0.1) translate3d(500px, -500px, 0);
  }
}

@keyframes fadeOutTopRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1, 0.1) translate3d(500px, -500px, 0);
    transform:  scale(0.1, 0.1) translate3d(500px, -500px, 0);
  }
}

.fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}

JavaScript

function bookingClick() {
	var element = document.querySelector('.booking');
  element.className = 'booking animated fadeOutTopRight';
}