I want to create a unique design where one container acts as an accent for another. Essentially, I have a styled text box and underneath it, I want a similarly sized container with a different background color that can be positioned in the bottom-right corner to serve as an accent. Although I have made some progress, here is my closest attempt so far: (Please ignore the colors)
<div className="space-y-6">
<p className="relative font-dmSans text-md leading-tight text-white-classic bg-yellow-600 mt-2 z-20 p-4 ">
<span className="absolute bottom-3 right-3 h-full w-full bg-black -z-10 "></span>
This is the content of my text.
</p>
Although this setup achieves some of what I want, the main issue is that it positions the text inside the box, which is expected. My ultimate goal is to position the yellow box behind the black one. I've tried other methods, but they resulted in the containers clashing or interfering with each other due to my limited experience with before: and after: pseudo-elements. Another reason I opted for this approach is because it didn't disrupt my overall styling structure.
Is there a better way to achieve this shifting effect with the yellow box positioned behind the black one while maintaining the desired aesthetics?
I attempted to use z-index within a layered container/accent effect and experimented with Tailwind's before: and after: classes, but encountered issues such as the background shining through the container and z-index not behaving as intended.