JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<div class="my-element"></div>

<button class="btn">Slide element</button>

CSS

.my-element {
  width: 100%;
  height: 300px;
  background-color: red;

  transform: translate3d(100%, 0, 0);
  transition: transform 1s ease-out;
}

.slide-in {
  transform: translate3d(0, 0, 0);
}

JavaScript

$(document).on('click', '.btn', function() {
  $('.my-element').toggleClass('slide-in');
});