JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="slide-holder">
	<h1>Slide header</h1>
</div>

<div class="container-fluid mt-5 pl-0 pr-0 position-relative">
	    <div class="row">
				<div class="col-6 p-5">
					   <p>Scottish fold russian blue but mouser but tiger mouser or singapura. Siberian egyptian mau sphynx and bobcat so cornish rex. Ocicat ragdoll persian. Abyssinian singapura egyptian mau. Balinese . Norwegian forest british shorthair for russian blue persian so tabby. Hihttps://jsfiddle.net/gRoberts/ae8dpq20/18/#malayan panther so ragdoll. Devonshire rex devonshire rex for bengal donskoy. Scottish fold malkin burmese norwegian forest havana brown ragdoll. Cheetah jaguar yet donskoy so puma, and ocelot, cornish rex british shorthair.</p>
				</div>
				<div class="col-6 pl-0 pr-0">
						<div class="fsm apple">
							Test
						</div>
				</div>
	    </div>
	<div class="row">
				<div class="col-6">
					   <div class="fsm pied">
							Pied
						</div>
				</div>
				<div class="col-6 p-5">
						<p>Scottish fold russian blue but mouser but tiger mouser or singapura. Siberian egyptian mau sphynx and bobcat so cornish rex. Ocicat ragdoll persian. Abyssinian singapura egyptian mau. Balinese . Norwegian forest british shorthair for russian blue persian so tabby. Himalayan panther so ragdoll. Devonshire rex devonshire rex for bengal donskoy. Scottish fold malkin burmese norwegian forest havana brown ragdoll. Cheetah jaguar yet donskoy so puma, and ocelot, cornish rex british shorthair.</p>
				</div>
	    </div>
</div>

SCSS

body {
	margin: 0;
	background-color: #f5f5f5;
	font-family: 'Roboto', sans-serif;
	
	&.no-scroll {
		overflow: hidden;
	}
}

.slide-holder {
	  display: flex;
	  background: #81BE83;
    height: 500px;
	  width: 100vw;
    color: #FFF;
	  align-items: center;
    justify-content: center;
    overflow: hidden;
}

h1 {
	font-weight: 900;
	text-transform: uppercase;
}

.fsm {
	margin: 0;
	background-color: blue;
	height: 400px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #f5f5f5;
	font-size: 1.5rem;
	transition: 800ms;
	cursor: pointer;
  
  &.clone {
    background: blue !important;
  }
	
	.fa {
		transition: 1s;
		color: #f5f5f5;
		font-size: 2.5vw;
		
		&:before {
			color: #f5f5f5;
		}
	}
	
	.modal-content {
		height: 0;
		width: 0;
		margin: 0;
	}
	
	h1.modal-content {
		opacity: 0;
		transition: 1s;
	}
	
	&.apple {
		background: linear-gradient(135deg, #83458e 0%,#608dc9 100%);
	}
	&.pied {
		background: linear-gradient(135deg, #6ecdc7 0%,#c7e4ec 100%);
	}
	&.codepen {
		background: linear-gradient(135deg, #778899 0%,#DCDCDC 100%);
	}
	&.google {
		background: linear-gradient(135deg, #4285f4 0%,#ea4335 100%);
	}
	
	&.growing {
		h1.modal-content {
			height: auto;
			margin: 0;
			opacity: 0;
			transition-delay: 0.5s;
		}
	}
	
	&.full-screen {
		height: 100vh;
		z-index: 100;
		margin: 0;
		border-radius: 0;
		
		.fa {
			font-size: 10vw;
		}
		.modal-content {
			height: auto;
			width: auto;
			margin: inital;
		}
		h1.modal-content {
			transition-delay: 0.5s;
			opacity: 1;
		}
	}
	&.shrinking {
		h1.modal-content {
			transition-delay: 0s;
			transition: 0.2s;
			opacity: 0;
			display: block;
		}
	}
	
	&-container {
		display: flex;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
	}
}

.modal-open {
  overflow: hidden;
}

JavaScript

$(document).on('click', '.fsm', function(e) {
	if ($(this).hasClass('clone')) {
  	var from = $($(this).data('cloned-from'));
 		$(this).animate({
      top: from.offset().top,
      left: from.offset().left,
      width: from.width(),
      height: from.height()
    }, 50, function() {
    	var el = $(this);
    	setTimeout(function() {
      	el.remove();
  			$('html,body').removeClass('modal-open');
      }, 700);
    });
    return;
  }
	var clone = $(this).clone();
  clone.data('cloned-from', this);
  clone.addClass('clone').css({
  	position: 'absolute',
    top: $(this).offset().top,
    left: $(this).offset().left,
    width: $(this).width(),
    height: $(this).height()
  });
  $('body').append(clone);
	clone.animate({
  	top: $(window).scrollTop(),
    left: 0,
    width: '100%',
    height: '100%'
  }, 50, 'linear', function() {
  	$('html,body').addClass('modal-open');
  });
});