JSFiddle - React, Tailwind, and code Playground

by ciaoben

HTML

<div id="slidebottom" class="slide">
  <button>slide it</button>
  <div class="inner">This is supposed to slide in from the left</div>
</div>

CSS

.slide {
  position: relative;
  overflow: hidden;
  height: 120px;
  width: 350px;
  margin: 1em 0;
  background-color: #ffc;
  border: 1px solid #999;
}
.slide .inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 338px;
  height: 36px;
  padding: 6px;
  background-color: #4c5;
  color: #333;
  }


.slide button {
  margin: .7em 0 0 .7em;
}

JavaScript

$(document).ready(function() {
     $('#slidebottom button').click(function() {
        var $lefty = $(this).next();
        $lefty.animate({
          left: parseInt($lefty.css('left'), 10) == 0 ?
          -$lefty.outerWidth() :
            0
        });
      });
  });