COMPONENTS · SECTIONS

Tailwind Contact Components & Sections

Let visitors reach you fast with Tailwind contact sections: inline form, map and social links, all WCAG-compliant and mobile-first.

7 sections1 freeTailwind CSS v4HTML · React · MCP

Pick sectionsTailkits UI

FREE CONTACT SECTIONS · COPY AND PASTE

All free sections

Contact: Two Column Block

Two‑column contact block with bold headline, short copy and contact button

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-contact-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-10.png"
    alt=""
  />
  <div class="max-w-7xl mx-auto px-4 xl:px-0">
    <div
      data-tk-motion="reveal fade"
      class="grid gap-y-8 md:px-4 lg:grid-cols-2 lg:items-center lg:gap-x-12 lg:gap-y-0 lg:px-8"
    >
      <div
        class="flex flex-col items-start sm:items-center sm:text-center lg:items-start 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"
        >
          Contact
        </div>
        <h2
          class="mt-8 bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-3xl font-semibold text-transparent sm:w-4/5 md:w-3/5 lg:mt-9 lg:w-11/12 lg:text-4xl lg:leading-tight xl:w-3/4"
        >
          Engage with our team of professionals
        </h2>
        <p
          class="mt-4 text-sm font-medium text-tk-ink-soft sm:w-1/2 lg:w-11/12"
        >
          By contacting our team, you open the doors to a world of
          possibilities. Our dedicated professionals are ready to engage with
          you.
        </p>
        <a
          href="/contact"
          title="Contact us"
          class="items-center justify-center whitespace-nowrap text-sm font-medium 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 px-5 py-3 rounded-tk-xl mt-8 flex lg:mt-9"
          data-tk-hover="press"
        >
          <svg
            class="shrink-0 mr-3 h-5"
            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="M5.337 21.718a6.707 6.707 0 0 1-.533-.074.75.75 0 0 1-.44-1.223 3.73 3.73 0 0 0 .814-1.686c.023-.115-.022-.317-.254-.543C3.274 16.587 2.25 14.41 2.25 12c0-5.03 4.428-9 9.75-9s9.75 3.97 9.75 9c0 5.03-4.428 9-9.75 9-.833 0-1.643-.097-2.417-.279a6.721 6.721 0 0 1-4.246.997Z"
              clip-rule="evenodd"
            />
          </svg>
          Contact us
          <svg
            class="shrink-0 ml-3 h-5"
            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="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      </div>
      <img
        class="h-52 w-full rounded-tk-3xl object-cover object-left-top lg:h-full"
        src="https://tailkits.com/ui/iframe/assets/img/bg-fade-6.png"
        alt=""
      />
    </div>
  </div>
</section>

6 MORE CONTACT SECTIONS IN TAILKITS UI

See plans

CONTACT SECTIONS FROM OTHER LIBRARIES

All component libraries

Third-party libraries in the Tailkits directory that include contact sections. Reviewed by the editors; sponsored listings are marked.

Prime UI

Paid

AI site builder, Next.js, Tailwind, no code

Pagedone

Free

500+ Tailwind components with Figma file

Flowrift

Free

80+ ready-made Tailwind CSS components

MORE TAILWIND SECTIONS

Hero 31Features 23How It Works 20Testimonial 13Footer 12Pricing 10Call to Action 9Navbar 9Newsletter 9Blog 7FAQ 7Header 7Logo Cloud 7Team 7Sign In 6Sign Up 6Stats 6Waitlist 6Announcement Bar 5Comparison 5Integrations 5Launch 5Roadmap 5Blog Content 3Launch Badges 3Bento Grid 2Coming Soon 2
GOOD TO KNOW

Frequently asked questions

Answers to common questions about Tailwind contact components.

Are these Tailwind contact sections free?

1 of the 7 contact sections on this page are free (Two Column Block): 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 contact 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 contact 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-<name>.json. Paid sections install with the token from your Tailkits UI account.

Can an AI coding assistant add a contact 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 contact sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Which other libraries have Tailwind contact components?

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