JSFiddle - React, Tailwind, and code Playground

HTML

<button id='btn'>log in</button>

<main id="main">
  <h1>
    Фильмы
  </h1>
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>

  <aside>
    <h1>
      Log in NOW
    </h1>
    <input type="email" placeholder="email">
    <br>
    <input type="password" placeholder="password">
  </aside>
</main>

CSS

body {
  overflow-x: hidden;
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

section div {
  height: 250px;
  width: 200px;
  margin: 5px 0;
  background: teal;
}

main {
  transition: 1s transform ease-in-out;
  position: relative;
}

aside {
  position: absolute;
  top: 0px;
  left: 0;
  transform: translateX(100vw);
  width: 100vw;
  height: 100vh;
}

main.slide-left {
  transform: translateX(-100%);
}

JavaScript

btn.onclick = () => {
  main.classList.toggle('slide-left')
}