Element Opacity with `opacity-*`

The `opacity-*` utility applies transparency to the entire element, including its content (text, child elements).

Full Opacity (opacity-100 - default)

This element and its text are fully opaque.

Element Opacity (`opacity-50`)

This entire element, including this text, is 50% transparent. Notice how the text is also semi-transparent.

Element Opacity (`opacity-25`)

This entire element, including this text, is 25% transparent. The text is even more faded.

Key takeaway: `opacity-*` affects the element and everything inside it. Check the next example for handling the "Gotcha" related to this.