JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
        <div class="children">Text Inside</div>
        <div class="children">Text Inside</div>
        <div class="children">Text Inside</div>
        <div class="children">Text Inside</div>
        <div class="children">Text Inside</div>
        <div class="children">Text Inside</div>
    </div>


    <label for="range">Change the scaling</label>
    <input type="range" name="" id="range" min="0" max="1.1" step="0.01" value="1">
    <label for="check">apply backdrop (blur)</label>
    <input type="checkbox" name="" id="check">

CSS

body {
            height: 100vh;
            width: 100vw;
            /* background-color: blue; */
            margin: 0;
            padding: 0;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;
        }

        .parent {
            height: 60vh;
            width: 60vw;
            border-radius: 1rem;
            display: grid;
            align-content: center;
            justify-content: center;
            gap: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(0, 7rem));
            grid-auto-rows: 7rem;
        }

        .children {
            box-shadow: 0px 0px .5rem 0 black;
            border-radius: 1rem;
            background-color: aqua;
            padding: 1rem;
            font-size: 1.6rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }

JavaScript

const parent = document.querySelector('.parent');

    const range = document.getElementById('range');
    const check = document.getElementById('check');


    range.addEventListener('input', function () {
        value = this.value

        // alert(value)
        parent.style.transform = 'scale(' + value + ")";
    });


    check.addEventListener('change', function () {
        if (this.checked) {
            parent.style.backdropFilter = "blur(5rem)";
        } else {
            parent.style.backdropFilter = "unset";

        }
    });