JSFiddle - React, Tailwind, and code Playground

by ashleycam3ron

HTML

<div id="slidebottom" class="slide">
  <button>slide it</button>
  <div class="inner">Slide from bottom</div>
</div>

CSS

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

JavaScript

$(document).ready(function() {
  $('#slidemarginleft button').click(function() {
    var $marginLefty = $(this).next();
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });
});