JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<div id="container">
  <img src="//placehold.it/200" />
</div>

<hr />

<button id="toggle">Change size</button>

SCSS

#container {
  align-items: center;
  background-color: red;
  display: flex;
  justify-content: center;
  width: 300px;

  img {
    flex: none;
    min-width: 100%;
  }
  
  &.shrunken {
    width: 150px;
  }
}

JavaScript

const toggleElm = document.getElementById('toggle');
const containerElm = document.getElementById('container');

toggleElm.addEventListener('click', (ev) => {
	containerElm.classList.toggle('shrunken');
});