Example 1: Basic Element Opacity

This example demonstrates the `opacity-*` utility. Notice how the entire element, including its background and text, becomes semi-transparent.

Opacity 50% `(opacity-50)`

This entire box, including this text, has its opacity set to 50%. The blue background is also semi-transparent.

Opacity 75% `(opacity-75)`

This entire box, including this text, has its opacity set to 75%.

Opacity 25% `(opacity-25)`

This entire box, including this text, has its opacity set to 25%.

No Opacity (Reference)

This is a normal, fully opaque box for comparison.