So, i wrote a div element with some buttons inside, i want to CLIP the background with the button element, so the button background will be colorful, but the background color for the element outside of the Button is black

But i cant seem to find a way on the TailwindCSS docs (im using NextJS)

    return (
    <div className="flex mt-10 flex-col items-center">
        <div className="relative">
            <div className="bg-gradient-to-br from-[#70d6ff] via-[#ff70a6] to-[#e9ff70]">
                <div className="p-4 font-semibold grid grid-cols-3 items-center">
                <button className="bg-transparent bg-clip-padding border rounded p-2" onClick={() => {setView(10);}}><span>Kelas 10</span></button>
                <button className="bg-transparent bg-clip-padding border rounded p-2 ml-2" onClick={() => {setView(11);}}>Kelas 11</button>
                <button className="bg-transparent bg-clip-padding border rounded p-2 ml-2" onClick={() => {setView(12);}}>Kelas 12</button>
                <div className="grid grid-cols-2 col-span-3 space-x-2 mt-2">
                    <button className="bg-transparent bg-clip-padding border rounded p-2" onClick={() => {setDateYesterday();}}>Kemarin</button>
                    <button className="bg-transparent bg-clip-padding border rounded p-2" onClick={() => {setDateTommorow();}}>Besok</button>
                </div>
                <button className="bg-transparent bg-clip-padding border rounded p-2 col-span-3 mt-2" onClick={handleCopy}>{copyMessage}</button>
                </div>
            </div>
            </div>
        <Display/>
    </div>
)

is there a way? or its impossible with the current TailwindCSS
Full code on GitHub

What i try: Using every bg-clip- on TailwindCSS
What i expect: The background on the button element stays, and for the elements/spacing outside of the button element to be black