I'm using the TailwindCSS framework for this simple webpage.
My issue is on Desktop.
I have some nice bubbles that should be floating on my blue content area but they're invisible due to the z-index. Whenever I adjust the z-index, I can see bubbles but then I'm unable to select text or the button on the content.
Is there a neat way to resolve this so I can have bubbles and select the button?
<script src="https://cdn.tailwindcss.com"></script>
<section
class="bg-white md:py-20 pb-0 md:pb-28 overflow-hidden md:overflow-visible"
style="position:relative;z-index:10"
>
<div class="background-overlay2"></div>
<div class="container mx-auto flex flex-col md:flex-row items-center">
<div class="hidden md:block md:w-1/2">
<img
src="https://placehold.co/600x400"
alt="Random image"
class="md:rounded-lg shadow-lg object-cover w-full h-full"
>
</div>
<div class="relative z-10 md:w-1/2">
<!-- Content Container (foreground content) -->
<div class="relative bg-[#1fa7e0] text-white p-8 py-12 pb-16 md:rounded-lg shadow-lg md:-ml-10 z-10">
<h1 class="text-3xl md:text-4xl font-semibold mb-6">
Discover <span class="font-bold">The Wonders of The Universe</span>
</h1>
<p class="text-xl md:text-lg font-semibold leading-relaxed mb-4">
Explore a vast array of adventures and possibilities.<br>
From ancient myths to modern science, embark on a journey of knowledge and exploration.
</p>
<p class="text-xl md:text-lg leading-relaxed mb-6">
Immerse yourself in diverse cultures, futuristic technologies, and timeless stories that shape the world around us.
</p>
<button class="bg-[#efd553] text-black font-bold px-8 py-3 rounded-full hover:bg-yellow-500 relative z-20">
Dive In
</button>
</div>
<!-- ✨ White bubbles in background -->
<div class="absolute inset-0 z-0 overflow-hidden">
<!-- Bubble 1 -->
<div class="absolute w-16 h-16 bg-white opacity-10 rounded-full top-4 left-6 animate-pulse"></div>
<!-- Bubble 2 -->
<div class="absolute w-10 h-10 bg-white opacity-10 rounded-full top-24 left-1/2 animate-bounce"></div>
<!-- Bubble 3 -->
<div class="absolute w-20 h-20 bg-white opacity-5 rounded-full bottom-10 right-10 animate-ping"></div>
<!-- Bubble 4 -->
<div class="absolute w-12 h-12 bg-white opacity-15 rounded-full bottom-0 left-12 animate-bounce"></div>
</div>
</div>
</div>
<!-- Bubble shapes -->
<div class="absolute inset-0 pointer-events-none">
<!-- Bubble 1 -->
<div class="absolute w-48 h-48 bg-[#77c434] rounded-full opacity-50 floaty" style="top: 10%; left: 15%; transform: rotate(12deg);"></div>
<!-- Bubble 2 -->
<div class="absolute w-60 h-60 bg-[#5e16eb] rounded-full opacity-40 floaty" style="top: 25%; left: 65%; transform: rotate(-25deg);"></div>
<!-- Bubble 3 -->
<div class="absolute w-40 h-40 bg-[#fa5755] rounded-full opacity-60 floaty" style="top: 60%; left: 30%; transform: rotate(8deg);"></div>
<!-- Bubble 4 -->
<div class="absolute w-72 h-72 bg-[#efd553] rounded-full opacity-50 floaty" style="top: 65%; left: 80%; transform: rotate(-6deg);"></div>
</div>
</section>My JSFiddle: https://jsfiddle.net/qjnym72f/
If the user doesn't need to interact with these bubbles, then put them on a higher z-index, and apply pointer-events: none;
This will make the element non-reactive to any kind of pointer events, and will let them "pass through" to whatever is below it.