The blue box below is a `div` (a block-level element) with `max-w-lg` and `mx-auto` applied. This centers it on the page.
This `div` has a `max-w-lg` (maximum width) and `mx-auto` (auto horizontal margins). Since it's a block element and has a constrained width, `mx-auto` effectively centers it.
This is commonly used for main content containers, login forms, etc.
Another example with `w-1/2` (50% width) and `mx-auto`.
This `div` uses `w-1/2` and `mx-auto`.