A container to wrap all the children elements according to the break points | NEXTJS COMPONENT | TAILWIND CSS

Container.tsx

// Use this component to wrap all the content of the page

'use client';

interface ContainerProps {
    children: React.ReactNode;
}

const Container: React.FC<ContainerProps> = ({
    children
}) => {
    return (
        <div 
        className="
            relative
            max-w-[1400px]
            mx-auto
            xl:px-20
            md:px-10
            sm:px-2
            px-6
        ">
            {children}
        </div>
    );
}

export default Container;

Make sure to add this to your Components folder & re use when you want to wrap elements according to the screen size.

Example

<Container>
 // Add your code here
<Container/>