JSFiddle - React, Tailwind, and code Playground

HTML

<body>

		<button class="morphButton">Terms & Conditions</button>
		
		<div class="morphContainer">
			<span class="close">X</span>
			<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">
			<span class="close">X</span>
			<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;
	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;
	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 {
	display: none;
	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: red;
}

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

JavaScript

function Morphing( button, container, content) {
	this.button = button;
	this.container = container;
	this.content = content;
	this.overlay = $('div.overlay');
	this.span = $('span.close');

    var self = this; // so you have a reference to this this.
    
    this.positions = {
        endPosition : {
            top: 100,
            left: '50%',
            width: 600,
            height: 400,
            marginLeft: -300
        },

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

}

Morphing.prototype.startMorph = function() {
	var self = this;
	this.button.on('click', function() {
		$(this).fadeOut(200);
		// Work on from here!
        console.log(self);
		setTimeout(self.containerMove.bind(self), 200);
	});
};

Morphing.prototype.containerMove = function() {
	var self = this;
        console.log(self);
	this.overlay.fadeIn();
	this.container.addClass('active');

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

Morphing.prototype.close = function() {
	var self = this;
        console.log(self);
	this.span.once('click', function() {
		self.content.fadeOut();
		self.span.fadeOut();
		self.overlay.fadeOut();
		setTimeout(self.animateBack.bind(self), 275);
	});
};

Morphing.prototype.animateBack = function() {
	var self = this;
        console.log(self);
	this.container.animate(this.positions.startPosition, 400, function() {
		self.button.fadeIn(300);
		self.container.removeClass('active');
	});
};

$(document).ready(function() {

	var morph = new Morphing( $('button.morphButton'), $('div.morphContainer'), $('h1.content, p.content') );

	
	morph.startMorph();

});

$.fn.once = function(a, b) {
    return this.each(function() {
  ...