JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<button id="orientation">Toggle Orientation</button>
<button id="panel">Toggle Panel</button>
<div id="viewport">
    <div id="video">
        <h1>Video</h1>
    </div>
    <div id="map">
        <h1>Map</h1>
    </div>
</div>

CSS

#viewport { border: 1px solid; height: 480px;width: 320px; overflow: hidden; position: relative; }
#viewport div { position: absolute; top: 0; -webkit-transition: 0.5s; transition: 0.5s; width: 100%; }
#video { background-color: red; box-shadow: inset 0 0 0 2px yellow; height: 80%; }
#map { background-color: blue; box-shadow: inset 0 0 0 2px pink; height: 100%; -webkit-transform: translateY(80%); transform: translateY(80%); }

.switch #video { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
.switch #map { -webkit-transform: translateY(0); transform: translateY(0); }

#viewport.landscape { height: 320px; width: 480px; }
#viewport.landscape div { height: 100%; }
.landscape #video { width: 80%; }
.landscape #map { width: 100%; -webkit-transform: translateX(80%); transform: translateX(80%); }
.landscape.switch #video { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
.landscape.switch #map { -webkit-transform: translateX(0); transform: translateX(0); }

h1 { color: white; font-size: 128px; text-align: center; }

JavaScript

var panel = document.getElementById('panel'),
    orientation = document.getElementById('orientation'),
    viewport = document.getElementById('viewport');
panel.addEventListener('click', function () {
    viewport.classList.toggle('switch');
});
orientation.addEventListener('click', function () {
    viewport.classList.remove('switch');
    viewport.classList.toggle('landscape');
});