JSFiddle - React, Tailwind, and code Playground

by Marie GĂ©rard

HTML

<!--<div class="slide-in from-left">
  <div class="slide-in-content">
    <ul>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
  </div>
</div>-->

<div class="user-page from-right">
  <div class="user-content">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>

<button id="toggle" style="position:absolute; top: 120px;">Toggle</button>

CSS

.user-page {
  z-index: 10; /* to position it in front of the other content */
  position: absolute;
  overflow: hidden; /* to prevent scrollbar appearing */
}

.user-page.from-right {
  right: 0;
}

.slide-in-content {
  padding: 5px 20px;
  background: #eee;
  transition: all .5s ease; /* our nice transition */
}

/*.slide-in.from-left .slide-in-content {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}*/

.user-page.from-right .user-content {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.user-page.show .user-content {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

JavaScript

$('#toggle').click(function() {
  $('.user-page').toggleClass('show');
});