The "Gotcha" with `opacity-*` is that it makes the entire element and its children transparent. If you only want a transparent background with opaque text, you need to use background opacity utilities.
This text is also 50% transparent because the parent div has `opacity-50`. This can make text hard to read.
Using `opacity-50` on the container.
Here, the background is 50% transparent using `bg-purple-600/50`, but the text remains fully opaque and readable.
Using `bg-purple-600/50` for background opacity only.
This uses `bg-blue-500` and `bg-opacity-75`. The background is 75% transparent, but the text is fully opaque.
Using `bg-blue-500 bg-opacity-75` for background opacity.