This example shows a simple horizontal navigation bar using
flex
,
space-x-4
, and
items-center
.
The
nav
element contains a
ul
which is styled with:
flex
: Makes the list items (
li
) arrange in a row.
space-x-4
: Adds a margin to the left of each list item except the first, creating space between them. (
1rem
or
16px
by default).
items-center
: Ensures all items within the flex container are vertically aligned to the center. This is crucial if items have varying heights, as shown in the next example.