JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<button id="btn">Toggle Numbers</button>

<p>
  In the year 2023, as the clock struck 3:45 PM, Alice found herself surrounded by 7 enthusiastic friends, all ready for a thrilling adventure. They hopped into a vintage convertible with license plate ABC-1234, and the engine roared to life. The road ahead stretched for 123.45 miles, winding through picturesque landscapes filled with 12,345 blooming flowers of various colors.
</p>
<p>
  Their playlist featured songs from the '80s, '90s, and the 2000s, including hits like "867-5309/Jenny," "99 Red Balloons," and "500 Miles." As they sang along, they spotted a billboard advertising a new smartphone with a 5G network capable of speeds up to 10 gigabits per second. Alice's phone buzzed with a message from Bob, who had just won $1,234 in a poker game.
</p>
<p>
  They eventually reached a quaint town with a population of 8,765. They decided to stop at a local diner where the special of the day was a $12.34 burger combo. The waiter, named David, wore a jersey with the number 23 on it, a nod to his favorite basketball player.
</p>
<p>
  After their meal, they continued their journey, passing by a field of 4,567 grazing sheep. The sun began to set, casting a warm, golden glow over the horizon. It was a day filled with numbers, memories, and laughter.
</p>

CSS

@font-face {
    font-family: "FlowCircularNumbers";
    src: url(https://fonts.gstatic.com/s/flowcircular/v11/lJwB-pc4j2F-H8YKuyvfxdZ41iDjWPj1vIk.woff2) format('woff2');
}

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.2;
}

body.hide-numbers {
  font-family: FlowCircularNumbers, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

JavaScript

btn.onclick = () => {
  const isActive = document.body.classList.contains('hide-numbers')
  document.body.classList[isActive ? 'remove' : 'add']('hide-numbers')
}