JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<div class="row">
  <div class="col-lg-3">
    <div id="myDiv1" class='card>
      my div
      <button>Full Screen2</button>
    </div>
  </div>
  <div class="col-lg-3">
    <div id="myDiv2" class='card'>
      my div
      <button>Full Screen1</button>
    </div>
  </div>
</div>

CSS

#myDiv.fullscreen {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#myDiv.fade {
  opacity: 0;
}
#myDiv {
  width: 500px;
  height: 400px;
  top: 20px;
  left: 20px;
  background: #cc0000;
  transition: all 2s linear;
}

JavaScript

$('button').click(function(e) {
	var $div = $('#myDiv');
  $div.toggleClass('fade');
  setTimeout(function(){
  	$div.toggleClass('fade fullscreen');
  }, 150);
});