JSFiddle - React, Tailwind, and code Playground

by Jeancarlo Fontalvo

HTML

<script src="https://rawgit.com/dan-silver/ElementTransitions/master/build/elementTransitions.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/dan-silver/ElementTransitions/master/build/elementTransitions.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="et-wrapper ">
        <div class="et-page ">
         <h2>Page 1</h2>
         <ul class="list-group">
          <li class="list-group-item et-rotate" et-in="moveFromRight " et-out="moveToRight ontop">Cras justo odio</li>
          <li class="list-group-item ">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
       </div>
       <div class="et-page et-rotate" et-in="moveFromLeft " et-out="moveToLeft ontop">
         <h2>Page 2</h2>
       </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  font-family: 'Lato', Calibri, Arial, sans-serif;
  padding: 50px;
}

button.et-rotate {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 999;
}

.et-wrapper {
  width: 100%;
 
  margin: 15px;
}


.et-page {
  height: auto;
  padding: 8px;
}
.et-page:nth-child(1) {
  background: #0ac2d2;
}

.et-page:nth-child(2) {
  background: #f68dbb;
}

.et-page:nth-child(3) {
  background: #60d7a9;
}

.et-page:nth-child(4) {
  background: #fdc162;
}

.et-page:nth-child(5) {
  background: #fd6a62;
}
.code-demos .et-wrapper{
  margin: 0px;
}

.et-page button.et-rotate {
  position: relative;
  margin-top: 40px;
  margin-left: 10px;
}

JavaScript

$('.et-wrapper').each(function(){
	 var me 				= $(this);
   var current 		= $('.et-page-current', this).outerHeight(true);
   var children   = $(':not(.et-page-current)', this);
   var maxHeight 	= 0;
   children.each(function(){
     var height = $(this).outerHeight(true);
   	 maxHeight  = (maxHeight < height) ? height : maxHeight;   
   });
   
   me.height( maxHeight );
});

console.log($(".et-page.et-page-current").height())