Example 1: Basic Horizontal Row with `flex`
This example shows how to use the `flex` class on a parent container to arrange child items in a horizontal row.
Item 1
Item 2
Item 3
Item 4
Explanation:
-
The outer `div` has the class `flex`. This makes it a flex container.
-
Its direct children (the `div` elements with "Item X") are now flex items and are arranged horizontally by default.
-
`space-x-4` is used on the parent to add horizontal spacing between the flex items (this is a Tailwind utility for spacing direct children in a flex or grid container).