Attempting to add a colorful background to the button elements inside a div, while keeping the outside background black has proven challenging. I've explored various options in Tailwind CSS documentation without success (currently 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 solution within Tailwind CSS, or is it currently not feasible?
Attempts so far involved utilizing all available bg-clip- classes within Tailwind.
Desired outcome: Implementing a reversed version of bg-clip-text, where text remains white but the colored background applies to the button element instead.