Container

The Container component is a simple yet powerful layout tool built with Tailwind CSS, designed specifically for Next.js and React.js projects. Its main purpose is to wrap around different sections of your website—such as FAQs, Features, Callouts, and more—ensuring each section stays perfectly aligned with consistent horizontal padding and a unified max-width.

By using the Container, you maintain a clean and professional layout across all pages, making your UI more visually balanced and easier to read. It's responsive by default, reusable across pages, and fits seamlessly into modern frontend workflows.

Container preview

1. Setup codes

Create a new file components/layouts/common/Container.tsx, then paste the codes below

jsx
import { cn } from "@/utils/cn";

const Container = ({ className, ...props }: React.ComponentPropsWithoutRef<"div">) => {
  return (
    <div className={cn("relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)} {...props} />
  );
};

export default Container;

2. Usages

Now you can use the Container component to wrap the main sections in your page like that

jsx
<div className="bg-gray-100 py-4">
  <Container>
    <div className="rounded-md bg-white p-4">Section 1</div>
  </Container>

  <Container>
    <div className="rounded-md bg-white p-4">Section 2</div>
  </Container>

  <Container>
    <div className="rounded-md bg-white p-4">Section 3</div>
  </Container>
</div>

The UI like that

As you can see, all content wrapped by the Container component has equal spacing on the left and right sides, which makes the website look cleaner and more consistent

Additionally, the Container component commonly used with SectionSpacer component to create a well-structured layout, ensuring consistent spacing between sections as well as even margins on the left and right.

jsx
<div className="bg-gray-100 py-4">
  <SectionSpacer>
    <Container>
      <HeroBanner />
    </Container>
  </SectionSpacer>

  <SectionSpacer>
    <Container>
      <Features />
    </Container>
  </SectionSpacer>

  <SectionSpacer>
    <Container>
      <FAQs />
    </Container>
  </SectionSpacer>

  <SectionSpacer>
    <Container>
      <FAQs />
    </Container>
  </SectionSpacer>
</div>