♨️ Landing 51

Flexbox Layout

Centered Layout

Live Demo

Centered Content

Code: tailwind-3-layout-flex.jsx

export default function LayoutFlexCenter() {
    return (
        <div className="h-12 bg-blue-200 flex items-center justify-center">
            Centered Content
        </div>
    );
}

Half Half

Live Demo

Left Half

Right Half

Code: tailwind-3-layout-flex.jsx

export default function LayoutFlexHalf() {
    return (
        <div className="flex">
            <div className="bg-blue-200 text-center w-1/2">
                Left Half
            </div>
            <div className="bg-gray-200 text-center w-1/2">
                Right Half
            </div>
        </div>
    );
}

Stack or side by side depending on screen size

On small screens, the DIVs are stacked vertically.
On larger screens, the DIVs are displayed side-by-side.
Implementation: By default, each DIV is stacked vertically due to flex-col. On larger screens(md=768px and up), it switches to flex-row using the md:flex-row class.

Live Demo

Top Section [Always on top]

Left Column [ Side by side / Stacked ]

Right Column [ Side by side / Stacked ]

Code: tailwind-3-layout-flex.jsx

export default function LayoutFlexStackSize() {
    return (
        <div className="flex flex-col">
            <div className="bg-blue-500">
                Top Section [Always on top]
            </div>
            <div className="flex flex-col md:flex-row">
                <div className="w-full bg-cyan-200 md:w-1/2">
                    Left Column [ Side by side / Stacked ]
                </div>
                <div className="w-full bg-pink-200 md:w-1/2">
                    Right Column [ Side by side / Stacked ]
                </div>
            </div>
        </div>
    );
}