JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<div id="main">
  <div class="col">
    <div class="content">
    panneau 1<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien justo, luctus sed orci a, eleifend eleifend enim. Maecenas vulputate vel elit eu cursus. Maecenas blandit tincidunt maximus.
    </div>
  </div>
  <div class="col">
    <div class="content">
    2nd panel<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer molestie consectetur quam quis tincidunt. Suspendisse efficitur sapien quam, eu venenatis elit pretium vitae. Maecenas nec tincidunt felis, at congue diam.
    </div>
  </div>
</div>

<button id="switch">Switch</button>

SCSS

#main {
  display: flex;
  width: 500px;
  height: 300px;
  background-color: #89c;
  overflow: hidden;
  padding: 15px;
  transition: all 0.3s ease-in-out;
  .col {
    min-width: 500px;
    margin: 0 20px;
    transition: all 0.3s ease-in-out;
  }
  &.active .col:first-child{
    margin-left: -530px;
  }
}

JavaScript

let switchBtn = document.getElementById('switch');
let main = document.getElementById('main');
switchBtn.onclick = function(){
	console.log('clic');
  main.classList.toggle('active');
};