JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cube-container">
    <div class="cube-shell">
         <div class="face face-center">
             <div class="scroll-content">
                 <div class="scrollable">
                       <p>
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum rutrum ante, in lacinia nunc blandit sed. Donec at metus nec erat condimentum ultrices nec a leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi a dui aliquam, facilisis lorem non, consectetur lacus. Ut vel orci dolor. Nunc sed efficitur arcu. Cras consectetur sagittis ex, sit amet congue purus consectetur non. Vestibulum luctus lectus eu ligula fringilla, sit amet pellentesque nibh tempus. Nulla sit amet lectus in nibh lacinia venenatis.
                       </p>
                        <p>
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum rutrum ante, in lacinia nunc blandit sed. Donec at metus nec erat condimentum ultrices nec a leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi a dui aliquam, facilisis lorem non, consectetur lacus. Ut vel orci dolor. Nunc sed efficitur arcu. Cras consectetur sagittis ex, sit amet congue purus consectetur non. Vestibulum luctus lectus eu ligula fringilla, sit amet pellentesque nibh tempus. Nulla sit amet lectus in nibh lacinia venenatis.
                       </p>
                       
                       <div class="cube-navigation right" 
               data-navigation-direction="rotate-center-to-right">
			                    <a href="#" class="arrow right-arrow">Click Me</a>
		                    </div>
                 </div>
             </div>
              
         </div>
         
         <div class="face face-right">
             <div class="scroll-content">
                 <div class="scrollable">
                       <p>
                       Lorem...

SCSS

body {
  margin: 0;
  padding: 0;
}

.cube-container {
	width: 100%;
	perspective: 2000px;
	-webkit-perspective: 2000px;

	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0,0,0); 

	.cube-shell {
		position: relative;
		z-index: 1;
		margin: 0 auto;
		transform-style: preserve-3d;
		transform: rotateY( 0deg ) translateX( 0px );

		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0,0,0); 

		animation-duration: 1s;
		animation-direction: normal;
		animation-fill-mode: forwards;
		animation-timing-function: ease;		

		&.rotate-center-to-right {
			animation-name: center-to-right;

		}
	}

	.face {
		background-position: 50% 50%;
		background-size: cover;
		padding: 0;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;

		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0,0,0); 

		position: relative;
		z-index: 10;
		text-align: center;

		width: 100%;


		// When we are in "cube mode"
		&.cube-compatible {
			overflow: hidden;
			position: absolute;
			//  z-index: 5;
			top: 0;
			left: 0;
			right: 0;
			// z-index: 0;
		}

		> .face-inner {
			overflow: scroll;
			// -webkit-overflow-scrolling: touch;
		}
	}


	.face-inner {
		max-width: 1320px;
		max-height: 100%;
		height: 100%;
		width: 100%;
		padding: 40px 60px;
		margin: auto;
		// display: inline-block;
		display: block;
		vertical-align: middle;
		position: relative;
		z-index: 30;



		box-sizing: border-box;
		-webkit-box-sizing: border-box;

	}  
  
  // Center face
	.face-center {
		position: relative;
		text-align: center;
    background: #ccc;
    
  }
  
	// Right face
	.face-right {
		transform-origin: center right;
    background: #efefef;
	}
  
  .scroll-content {
			overflow: scroll;
			-webkit-overflow-scrolling: touch;
			height: 100%;
		}

		.scrollable {
			-webkit-backface-visibility: hidden;
		}
  
}

@keyframes center-to-right {
	0% {
		transform: rotateY( 0deg ) scale3d( 1, 1, 1 );
	}

	// 15% {
	// 	transform:...

JavaScript

;(function($){
	
	"use strict";

	/** Control the amount of window resize events */
	var throttle;

	var _window = $( window ),
		_windowWidth,
		_windowHeight;



	/** Variables relating to cube functionality */
	var cubeConatiner = $( ".cube-container" ),
		cubeShell = $( ".cube-shell" ),
		cubeFaces = cubeShell.find( ".face" ),
		cubeFaceLeft = cubeShell.find( ".face-left" ),
		cubeFaceCenter = cubeShell.find( ".face-center" ),
		cubeFaceRight = cubeShell.find( ".face-right" ),
		cubeFaceTop = cubeShell.find( ".face-lid" ),
		cubeFaceBack = cubeShell.find( ".face-back" ),
		cubeNavigation = cubeConatiner.find( ".cube-navigation a, .mobile-navigation a" );

	
	// Handle the cube's navigation
	cubeNavigation.on( "click", function( event ) {
		event.preventDefault();

		// Get the navigation/class to work out how we move the cube
		var navigationDirection = null;
		var parent = this.parentNode;

		while ( ! navigationDirection ) {
			if ( ! parent.getAttribute( "data-navigation-direction" ) ) {
				parent = parent.parentNode;
			} else {
				navigationDirection = parent.getAttribute( "data-navigation-direction" );
			}
		}		

		// Remove classes from the cube and add this new class to move the cube
		cubeShell.removeClass( "rotate-center-to-left rotate-center-to-right rotate-left-to-center rotate-right-to-center rotate-back-to-center rotate-center-to-back" );
		cubeShell.addClass( navigationDirection );

	} );

	
	/**
	 * Attach event listener to the indow resize event
	 */
	_window.on( "resize", function( event ) {
		clearTimeout( throttle );
		throttle = setTimeout( callAllWindowResizeFunctions, 200 );
	} );

	/**
	 * Initial setup on page load
	 */
	_window.on( "load", callAllWindowResizeFunctions );


	function callAllWindowResizeFunctions() {
		// Set the new window dimensions
		_windowWidth = _window.width();
		_windowHeight = _window.height();

		// Set up the cube's dimensions again
		setupCubeDimensions();

		
	}

	/**
	 * Sets up the correct dimension...