JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <div id="content">
    <h2>
      Привет. У меня случилась маленькая проблемка. Я пытался сделать так чтобы после нажатия на кнопку появлялось модальное окно и размывался задний фон. Сделать модальное окно у меня получилось а размытие нет. Я нашел в интернете размытие с помощью CSS, но тут и возникает проблема, как сделать чтобы после нажатия на кнопку этот CSS срабатывал?
    </h2>
    <button id='btn'>
      OPEN modal
    </button>
    <h2>
      Привет. У меня случилась маленькая проблемка. Я пытался сделать так чтобы после нажатия на кнопку появлялось модальное окно и размывался задний фон. Сделать модальное окно у меня получилось а размытие нет. Я нашел в интернете размытие с помощью CSS, но тут и возникает проблема, как сделать чтобы после нажатия на кнопку этот CSS срабатывал?
    </h2>
    <h2>
      Привет. У меня случилась маленькая проблемка. Я пытался сделать так чтобы после нажатия на кнопку появлялось модальное окно и размывался задний фон. Сделать модальное окно у меня получилось а размытие нет. Я нашел в интернете размытие с помощью CSS, но тут и возникает проблема, как сделать чтобы после нажатия на кнопку этот CSS срабатывал?
    </h2>
    <h2>
      Привет. У меня случилась маленькая проблемка. Я пытался сделать так чтобы после нажатия на кнопку появлялось модальное окно и размывался задний фон. Сделать модальное окно у меня получилось а размытие нет. Я нашел в интернете размытие с помощью CSS, но тут и возникает проблема, как сделать чтобы после нажатия на кнопку этот CSS срабатывал?
    </h2>
    <h2>
      Привет. У меня случилась маленькая проблемка. Я пытался сделать так чтобы после нажатия на кнопку появлялось модальное окно и размывался задний фон. Сделать модальное окно у меня получилось а размытие нет. Я нашел в интернете размытие с помощью CSS, но тут и возникает проблема, как сделать чтобы после нажатия на кнопку этот CSS срабатывал?
    </h2>
    <h2>
      Привет. У меня случилась маленькая проблемка. Я пытался сделать...

CSS

main {
  position: relative;
}

button {
  width: 100%;
  padding: 2em;
}

#content.blur {
  filter: blur(2px);
}

#modal {
  position: absolute;
  top: 0em;
  opacity: 0;
  width: 50%;
  left: 25%;
  padding: 3em 1em;
  border: 4px solid black;
  background: white;
  transition: 400ms all;
  pointer-events: none;
}

#modal.show {
  top: 3em;
  opacity: 1;
  pointer-events: initial;
}

JavaScript

btn.addEventListener('click', () => {
  content.classList.add('blur')
  modal.classList.add('show')
})