Are these Tailwind team sections free?

1 of the 7 team sections on this page are free (Grid Background Layout): copy the HTML above, no account needed. The other 6 are part of Tailkits UI, the paid library; each shows a preview here and unlocks its code with a Tailkits UI plan.

Which Tailwind CSS version do the team components use?

Tailwind CSS v4. The code is plain HTML with utility classes; colours, radii and shadows read CSS variables named like shadcn/ui's (bg-primary, text-muted-foreground), so a shadcn theme or a DESIGN.md export reskins every section. Add tailkits-theme.css next to the code for the default look.

Can I use these team sections in React or Next.js?

Yes. Every section is also a React component in the @tailkits shadcn registry. Free sections install without an account, for example: npx shadcn@latest add https://tailkits.com/r/free- .json. Paid sections install with the token from your Tailkits UI account.

Can an AI coding assistant add a team section for me?

Yes. The Tailkits MCP at tailkits.com/mcp is free and open, with no account: Claude Code, Cursor and other MCP clients can search the team sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Which other libraries have Tailwind team components?

The directory lists 3 third-party libraries with team sections, including , , . They are shown below our own sections, with their pricing and stack.

Tailwind Team Components & Sections

FREE TEAM SECTIONS · COPY AND PASTE

All free sections

Team: Grid Background Layout

3 column team members grid with with photos, names, and titles

Free

Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-team-1.json

View HTML code

<section class="pt-12 lg:pt-16 relative pb-12 lg:pb-16">
  <img
    class="absolute left-0 top-0 -z-20 h-full w-full object-cover"
    src="https://tailkits.com/ui/iframe/assets/img/bg-overlay-3.png"
    alt=""
  />
  <div class="max-w-7xl mx-auto px-4 xl:px-0">
    <div
      class="flex flex-col items-start sm:items-center sm:text-center md:px-4 lg:items-start lg:px-8 lg:text-left"
    >
      <div
        class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-background text-secondary-foreground px-2.5 py-1"
      >
        Amazing team
      </div>
      <h2
        class="mt-8 bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-xl font-semibold text-transparent md:text-2xl lg:mt-9 lg:w-5/6 lg:leading-tight xl:w-3/4 xl:text-3xl"
      >
        Meet Our Exceptional Team
      </h2>
      <p class="mt-4 text-sm font-medium text-tk-ink-soft sm:w-1/2 lg:w-2/5">
        The dedicated individuals behind our success, working collaboratively to
        deliver outstanding results.
      </p>
    </div>
    <div class="mt-4 border-b border-b-tk-border-soft lg:mt-6"></div>
    <div
      data-tk-motion="stagger develop"
      class="relative mt-6 grid gap-y-6 sm:mx-auto sm:w-2/3 md:w-1/2 md:px-4 lg:mt-9 lg:w-full lg:grid-cols-3 lg:gap-x-6 lg:gap-y-0 lg:px-8"
    >
      <button
        type="button"
        aria-label="Next"
        class="rounded-full cursor-pointer flex items-center justify-center whitespace-nowrap transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 w-8 h-8 p-1.5 md:w-10 md:h-10 md:p-2.5 xl:w-11 xl:h-11 xl:p-3 absolute right-0 top-1/2 z-10 -translate-y-1/2"
        data-tk-hover="press"
      >
        <svg
          class="h-5 shrink-0"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            fill-rule="evenodd"
            d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
      <article class="flex flex-col">
        <figure class="w-full rounded-tk-2xl lg:rounded-tk-3xl lg:shadow-tk-sm">
          <img
            class="h-40 w-full rounded-tk-2xl object-cover lg:h-64 lg:rounded-tk-3xl"
            src="https://tailkits.com/ui/iframe/assets/img/profile.png"
            alt="Features image"
          />
        </figure>
        <div class="flex flex-col items-start p-3 lg:p-4">
          <h3 class="font-semibold text-card-foreground md:text-lg lg:text-xl">
            John Anderson
          </h3>
          <p
            class="mt-0.5 text-sm font-medium text-muted-foreground lg:mt-1 lg:text-base"
          >
            Chief Executive Officer
          </p>
        </div>
      </article>
      <article class="flex flex-col">
        <figure class="w-full rounded-tk-2xl lg:rounded-tk-3xl lg:shadow-tk-sm">
          <img
            class="h-40 w-full rounded-tk-2xl object-cover lg:h-64 lg:rounded-tk-3xl"
            src="https://tailkits.com/ui/iframe/assets/img/profile-2.png"
            alt="Features image"
          />
        </figure>
        <div class="flex flex-col items-start p-3 lg:p-4">
          <h3 class="font-semibold text-card-foreground md:text-lg lg:text-xl">
            Emily Thompson
          </h3>
          <p
            class="mt-0.5 text-sm font-medium text-muted-foreground lg:mt-1 lg:text-base"
          >
            Chief Technology Officer
          </p>
        </div>
      </article>
      <article class="flex flex-col">
        <figure class="w-full rounded-tk-2xl lg:rounded-tk-3xl lg:shadow-tk-sm">
          <img
            class="h-40 w-full rounded-tk-2xl object-cover lg:h-64 lg:rounded-tk-3xl"
            src="https://tailkits.com/ui/iframe/assets/img/profile-3.png"
            alt="Features image"
          />
        </figure>
        <div class="flex flex-col items-start p-3 lg:p-4">
          <h3 class="font-semibold text-card-foreground md:text-lg lg:text-xl">
            Sarah Roberts
          </h3>
          <p
            class="mt-0.5 text-sm font-medium text-muted-foreground lg:mt-1 lg:text-base"
          >
            Chief Marketing Officer
          </p>
        </div>
      </article>
    </div>
  </div>
</section>