JSFiddle - React, Tailwind, and code Playground

by PlĂ­nio Naves

HTML

<button id="btn">Click me</button>

<div class="scale">
  <h1>djjfdgfd</h1>
  <p>dfsdfdsfds</p>
  <p>dsdfdfs</p>
  <p>fdgdfgfdg</p>
</div>

CSS

.scale {
  width: 100%;
  background: blue;
  transition: transform 0.2s;
  transform-origin: top;
}

JavaScript

const btn = document.querySelector('#btn')
const scale = document.querySelector('.scale')
let showing = true

btn.addEventListener('click', e => {
console.log('showing', showing)
	scale.style.transform = showing ? 'scale(1, 0)' : 'scale(1, 1)'
  showing = !showing
})