JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<button class="morphButton">Terms & Conditions</button>
		
		<div class="morphContainer">
			<h1 class="content">Terms & Conditions </h1>
			<p class="content"> Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut juccama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
		</div>

		<button class="newButton">New</button>

		<div class="newContainer">
			<h1 class="newContent">New Stuff</h1>
			<p class="newContent">Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut juccama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.</p>
		</div>

		


		<div class="overlay"></div>

CSS

body {
	background-color: green;
	font-family: 'Cabin';
}

button.morphButton {
	position: absolute;
	left: 20%;
	top: 150px;
	margin-left: -100px;
	width: 200px;
	height: 70px;
	background-color: /*#3C6DE2*/black;
	border: none;
	color: white;
	font-size: 18px;
	cursor: pointer;
	z-index: 10;
}

div.morphContainer {
	position: absolute;
	left: 20%;
	top: 150px;
	margin-left: -100px;
	width: 200px;
	height: 70px;
	background-color: /*#3C6DE2*/black;
	z-index: 9;
}

button.newButton {
	position: absolute;
	left: 70%;
	top: 300px;
	width: 200px;
	height: 70px;
	margin-left: -100px;
	background-color: black;
	border: none;
	color: white;
	font-size: 18px;
	cursor: pointer;
	z-index: 10;
}

div.newContainer {
	position: absolute;
	left: 70%;
	top: 300px;
	margin-left: -100px;
	width: 200px;
	height: 70px;
	background-color: /*#3C6DE2*/black;
	z-index: 9;
}

div.active {
	z-index: 30;
}

h1, p {
	display: none;
	margin: 50px;
}

h1 {
	color: white;
}

p {
	color: white;
	line-height: 25px;
	font-size: 18px;
	margin-top: 0;
}

span.close {
	font-size: 20px;
	z-index: 10;
	color: white;
	cursor: pointer;
	right: 40px;
	top: 30px;
	position: absolute;
	transition:color 0.2s;
	-webkit-transition:color 0.2s;
}

span.close:hover {
	color: black;
}

div.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.5;
}

JavaScript

$(document).ready(function() {

	// fix span and display on button

	var morphObject = {

		button: $('button.morphButton'),
		container: $('div.morphContainer'),
		overlay: $('div.overlay'),
		content: $('h1.content, p.content'),

		endPosition: {
			top: 100,
			left: '50%',
			width: 600,
			height: 400,
			marginLeft: -300
		},


		init: function() {
			var mO = morphObject,
				button = mO.button;

			button.on('click', function() {
				button.fadeOut(200);
				setTimeout(mO.containerMove, 200);
			});
				
		},

		containerMove: function() {
			var mO = morphObject,
				content = mO.content,
				overlay = mO.overlay,
				container = mO.container,
				span = $('span.close');

			overlay.fadeIn();
			container.addClass('active');

			container.animate(mO.endPosition, 400, function() {
					content.fadeIn();
					span.fadeIn();
					mO.close();
			});

		},

		close: function() {
			var mO = morphObject,
				container = mO.container,
				overlay = mO.overlay,
				content = mO.content;

			if ( container.find('span.close').length ) return;

			$('<span class="close">X</span>').appendTo(container);

			var span = $('span.close');

			span.on('click', function() {
				content.fadeOut();
				span.fadeOut();
				overlay.fadeOut();
				setTimeout(mO.animateBack, 200);
			});

		},

		animateBack: function() {
			var mO = morphObject,
				container = mO.container;
				button = mO.button;

			container.animate(mO.startPosition, 400, function() {
					container.removeClass('active');
					button.fadeIn(300);
			});

		}
	
	}
	
	// End of morphObject One

	var container = morphObject.container;

	morphObject.startPosition = {
	    top: container.css('top'),
	    left: container.css('left'),
	    width: container.css('width'),
	    height: container.css('height'),
	    marginLeft: container.css('margin-left')
	};

    <!-- start of morphObject two -->

	var morphObjectTwo = {

		button: $('button.newButton'),
		container: $('div.newContainer'),
		overlay:...