JSFiddle - React, Tailwind, and code Playground

by _nderscore

HTML

<div class="parent">
    <div class="blackblock"></div>
    <div class="child">
       <a href="javascript:;" id="link">Click me, baby, one more time.</a>
    </div>
    <div class="blackblock"></div>
</div>

SCSS

html, body { margin: 0; padding: 0; min-height: 100%; }
* { box-sizing: border-box; }

.parent {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: #CCC;
  height: 100vh;
  background: #000 url('https://i.imgur.com/1MkZE30.jpg') center center no-repeat;
  background-size: cover;
  
  .child {
    flex: 0 1 auto;
    text-align: center;
    transition: transform 750ms ease-in-out;
    background: #F00;
    
    &.weee {
      transform: translateX(-90vw);
      -ms-transform: translateX(-90vw);
    }
    
    a {
      display: block;
      padding: 50px;
      color: #000;
    }
  }
  
  .blackblock {
    flex: 1 0 auto;
    background: #000;
  }
}

JavaScript

link.addEventListener('click', function(e) {
    document.querySelector('.child').classList.toggle('weee');
});