Do I need real partner logos?

No. The sections use simple icon marks and placeholder names. Swap in logos you have permission to use.
Does the scrolling row respect reduced motion?

Yes. It only moves with the optional motion layer, stays still under prefers-reduced-motion, and has a pause control.
Are these Tailwind integrations sections free?

1 of the 5 integrations sections on this page are free (Searchable Integrations Grid): copy the HTML above, no account needed. The other 4 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 integrations 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 integrations 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 integrations 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 integrations sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.
Tailwind Integrations Components & Sections

Integrations: Searchable Integrations Grid

Search field above a twelve-app integrations grid
Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-integrations-1.json
View HTML code
<section class="py-16 lg:py-24">
  <div class="max-w-7xl mx-auto px-4 xl:px-0">
    <div class="flex flex-col items-center text-center">
      <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"
      >
        <svg
          class="h-3 shrink-0 mr-1.5 text-muted-foreground"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            d="M11.25 5.337c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.036 1.007-1.875 2.25-1.875S15 2.34 15 3.375c0 .369-.128.713-.349 1.003-.215.283-.401.604-.401.959 0 .332.278.598.61.578 1.91-.114 3.79-.342 5.632-.676a.75.75 0 0 1 .878.645 49.17 49.17 0 0 1 .376 5.452.657.657 0 0 1-.66.664c-.354 0-.675-.186-.958-.401a1.647 1.647 0 0 0-1.003-.349c-1.035 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401.31 0 .557.262.534.571a48.774 48.774 0 0 1-.595 4.845.75.75 0 0 1-.61.61c-1.82.317-3.673.533-5.555.642a.58.58 0 0 1-.611-.581c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.035-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959a.641.641 0 0 1-.658.643 49.118 49.118 0 0 1-4.708-.36.75.75 0 0 1-.645-.878c.293-1.614.504-3.257.629-4.924A.53.53 0 0 0 5.337 15c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.036 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.369 0 .713.128 1.003.349.283.215.604.401.959.401a.656.656 0 0 0 .659-.663 47.703 47.703 0 0 0-.31-4.82.75.75 0 0 1 .83-.832c1.343.155 2.703.254 4.077.294a.64.64 0 0 0 .657-.642Z"
          />
        </svg>
        Integrations
      </div>
      <h2
        class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-3xl font-semibold text-transparent lg:text-5xl mt-6 sm:w-4/5 md:w-2/3 lg:mt-8 lg:w-1/2 lg:text-4xl lg:leading-tight"
      >
        Works with the tools you already use
      </h2>
      <p
        class="text-sm font-medium text-tk-ink-soft leading-normal lg:leading-normal lg:text-base mt-4 sm:w-2/3 md:w-1/2 xl:w-2/5"
      >
        Connect Saaslandings to your stack in a few clicks. Forms, payments and
        analytics flow where your team already works.
      </p>
      <form class="mt-8 w-full sm:w-3/5 lg:w-2/5" role="search" action="#">
        <div class="flex w-full flex-col">
          <label for="integration-search" class="sr-only"
            >Search integrations</label
          >
          <div
            class="group relative rounded-tk-xl border border-input bg-background transition hover:bg-muted"
          >
            <input
              id="integration-search"
              name="search"
              type="search"
              class="font-medium w-full rounded-tk-xl bg-transparent shadow-tk-sm text-sm placeholder:font-medium placeholder:text-sm text-card-foreground focus-visible:outline-none focus:shadow-tk-focus pl-10 pr-9 py-3 placeholder:text-tk-text-placeholder"
              name="q"
              placeholder="Search 120+ integrations"
            />
            <svg
              class="absolute top-1/2 -translate-y-1/2 left-0 flex h-5 items-center text-muted-foreground transition group-hover:text-tk-text-faint group-focus:text-muted-foreground ml-3"
              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="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
        </div>
      </form>
    </div>
    <ul
      data-tk-motion="stagger scale"
      class="mt-10 grid grid-cols-2 gap-3 sm:grid-cols-3 md:px-4 lg:mt-12 lg:grid-cols-4 lg:gap-4 lg:px-8"
    >
      <li>
        <a
          href="/integrations/chatline"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-1"
          >
            <svg
              class="h-5 text-tk-ink"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                d="M4.913 2.658c2.075-.27 4.19-.408 6.337-.408 2.147 0 4.262.139 6.337.408 1.922.25 3.291 1.861 3.405 3.727a4.403 4.403 0 0 0-1.032-.211 50.89 50.89 0 0 0-8.42 0c-2.358.196-4.04 2.19-4.04 4.434v4.286a4.47 4.47 0 0 0 2.433 3.984L7.28 21.53A.75.75 0 0 1 6 21v-4.03a48.527 48.527 0 0 1-1.087-.128C2.905 16.58 1.5 14.833 1.5 12.862V6.638c0-1.97 1.405-3.718 3.413-3.979Z"
              />
              <path
                d="M15.75 7.5c-1.376 0-2.739.057-4.086.169C10.124 7.797 9 9.103 9 10.609v4.285c0 1.507 1.128 2.814 2.67 2.94 1.243.102 2.5.157 3.768.165l2.782 2.781a.75.75 0 0 0 1.28-.53v-2.39l.33-.026c1.542-.125 2.67-1.433 2.67-2.94v-4.286c0-1.505-1.125-2.811-2.664-2.94A49.392 49.392 0 0 0 15.75 7.5Z"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Chatline</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >Messaging</span
            >
          </span>
        </a>
      </li>
      <li>
        <a
          href="/integrations/paybridge"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-4"
          >
            <svg
              class="h-5 text-tk-ink"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                d="M4.5 3.75a3 3 0 0 0-3 3v.75h21v-.75a3 3 0 0 0-3-3h-15Z"
              />
              <path
                fill-rule="evenodd"
                d="M22.5 9.75h-21v7.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-7.5Zm-18 3.75a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5h-6a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z"
                clip-rule="evenodd"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Paybridge</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >Payments</span
            >
          </span>
        </a>
      </li>
      <li>
        <a
          href="/integrations/metricly"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-8"
          >
            <svg
              class="h-5 text-tk-ink"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75ZM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 0 1-1.875-1.875V8.625ZM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 0 1 3 19.875v-6.75Z"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Metricly</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >Analytics</span
            >
          </span>
        </a>
      </li>
      <li>
        <a
          href="/integrations/mailroom"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-5"
          >
            <svg
              class="h-5 text-tk-ink"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z"
              />
              <path
                d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Mailroom</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >Email</span
            >
          </span>
        </a>
      </li>
      <li>
        <a
          href="/integrations/calendo"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-9"
          >
            <svg
              class="h-5 text-tk-ink"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                d="M12.75 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM7.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM8.25 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM9.75 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM10.5 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM12.75 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM14.25 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
              />
              <path
                fill-rule="evenodd"
                d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z"
                clip-rule="evenodd"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Calendo</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >Scheduling</span
            >
          </span>
        </a>
      </li>
      <li>
        <a
          href="/integrations/storebox"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-3"
          >
            <svg
              class="h-5 text-tk-ink"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                d="M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375 7.03 1.5 12 1.5s9 2.183 9 4.875Z"
              />
              <path
                d="M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.283 8.283 0 0 0 1.897-1.384c.016.121.025.244.025.368C21 12.817 16.97 15 12 15s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.285 8.285 0 0 0 1.897 1.384C6.809 12.164 9.315 12.75 12 12.75Z"
              />
              <path
                d="M12 16.5c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 0 0 1.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 0 0 1.897 1.384C6.809 15.914 9.315 16.5 12 16.5Z"
              />
              <path
                d="M12 20.25c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 0 0 1.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 0 0 1.897 1.384C6.809 19.664 9.315 20.25 12 20.25Z"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Storebox</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >Database</span
            >
          </span>
        </a>
      </li>
      <li>
        <a
          href="/integrations/formly"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-6"
          >
            <svg
              class="h-5 text-tk-ink"
              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.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
                clip-rule="evenodd"
              />
              <path
                d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Formly</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >Forms</span
            >
          </span>
        </a>
      </li>
      <li>
        <a
          href="/integrations/hookshot"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-12"
          >
            <svg
              class="h-5 text-tk-ink"
              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="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
                clip-rule="evenodd"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Hookshot</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >Automation</span
            >
          </span>
        </a>
      </li>
      <li>
        <a
          href="/integrations/cloudvault"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-2"
          >
            <svg
              class="h-5 text-tk-ink"
              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="M4.5 9.75a6 6 0 0 1 11.573-2.226 3.75 3.75 0 0 1 4.133 4.303A4.5 4.5 0 0 1 18 20.25H6.75a5.25 5.25 0 0 1-2.23-10.004 6.072 6.072 0 0 1-.02-.496Z"
                clip-rule="evenodd"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Cloudvault</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >Storage</span
            >
          </span>
        </a>
      </li>
      <li>
        <a
          href="/integrations/ticketdesk"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-11"
          >
            <svg
              class="h-5 text-tk-ink"
              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="M19.449 8.448 16.388 11a4.52 4.52 0 0 1 0 2.002l3.061 2.55a8.275 8.275 0 0 0 0-7.103ZM15.552 19.45 13 16.388a4.52 4.52 0 0 1-2.002 0l-2.55 3.061a8.275 8.275 0 0 0 7.103 0ZM4.55 15.552 7.612 13a4.52 4.52 0 0 1 0-2.002L4.551 8.45a8.275 8.275 0 0 0 0 7.103ZM8.448 4.55 11 7.612a4.52 4.52 0 0 1 2.002 0l2.55-3.061a8.275 8.275 0 0 0-7.103 0Zm8.657-.86a9.776 9.776 0 0 1 1.79 1.415 9.776 9.776 0 0 1 1.414 1.788 9.764 9.764 0 0 1 0 10.211 9.777 9.777 0 0 1-1.415 1.79 9.777 9.777 0 0 1-1.788 1.414 9.764 9.764 0 0 1-10.212 0 9.776 9.776 0 0 1-1.788-1.415 9.776 9.776 0 0 1-1.415-1.788 9.764 9.764 0 0 1 0-10.212 9.774 9.774 0 0 1 1.415-1.788A9.774 9.774 0 0 1 6.894 3.69a9.764 9.764 0 0 1 10.211 0ZM14.121 9.88a2.985 2.985 0 0 0-1.11-.704 3.015 3.015 0 0 0-2.022 0 2.985 2.985 0 0 0-1.11.704c-.326.325-.56.705-.704 1.11a3.015 3.015 0 0 0 0 2.022c.144.405.378.785.704 1.11.325.326.705.56 1.11.704.652.233 1.37.233 2.022 0a2.985 2.985 0 0 0 1.11-.704c.326-.325.56-.705.704-1.11a3.016 3.016 0 0 0 0-2.022 2.985 2.985 0 0 0-.704-1.11Z"
                clip-rule="evenodd"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Ticketdesk</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >Support</span
            >
          </span>
        </a>
      </li>
      <li>
        <a
          href="/integrations/pipeflow"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-7"
          >
            <svg
              class="h-5 text-tk-ink"
              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="M3.792 2.938A49.069 49.069 0 0 1 12 2.25c2.797 0 5.54.236 8.209.688a1.857 1.857 0 0 1 1.541 1.836v1.044a3 3 0 0 1-.879 2.121l-6.182 6.182a1.5 1.5 0 0 0-.439 1.061v2.927a3 3 0 0 1-1.658 2.684l-1.757.878A.75.75 0 0 1 9.75 21v-5.818a1.5 1.5 0 0 0-.44-1.06L3.13 7.938a3 3 0 0 1-.879-2.121V4.774c0-.897.64-1.683 1.542-1.836Z"
                clip-rule="evenodd"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Pipeflow</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >CRM</span
            >
          </span>
        </a>
      </li>
      <li>
        <a
          href="/integrations/signalbox"
          class="flex h-full items-center gap-x-3 rounded-tk-2xl border border-tk-border-soft bg-background p-3 shadow-tk-sm transition hover:border-border hover:bg-muted focus:shadow-tk-focus sm:p-4"
        >
          <span
            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-tk-xl bg-tk-tint-10"
          >
            <svg
              class="h-5 text-tk-ink"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              data-slot="icon"
            >
              <path
                d="M5.85 3.5a.75.75 0 0 0-1.117-1 9.719 9.719 0 0 0-2.348 4.876.75.75 0 0 0 1.479.248A8.219 8.219 0 0 1 5.85 3.5ZM19.267 2.5a.75.75 0 1 0-1.118 1 8.22 8.22 0 0 1 1.987 4.124.75.75 0 0 0 1.48-.248A9.72 9.72 0 0 0 19.266 2.5Z"
              />
              <path
                fill-rule="evenodd"
                d="M12 2.25A6.75 6.75 0 0 0 5.25 9v.75a8.217 8.217 0 0 1-2.119 5.52.75.75 0 0 0 .298 1.206c1.544.57 3.16.99 4.831 1.243a3.75 3.75 0 1 0 7.48 0 24.583 24.583 0 0 0 4.83-1.244.75.75 0 0 0 .298-1.205 8.217 8.217 0 0 1-2.118-5.52V9A6.75 6.75 0 0 0 12 2.25ZM9.75 18c0-.034 0-.067.002-.1a25.05 25.05 0 0 0 4.496 0l.002.1a2.25 2.25 0 1 1-4.5 0Z"
                clip-rule="evenodd"
              />
            </svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate font-semibold text-card-foreground"
              >Signalbox</span
            >
            <span
              class="block truncate text-xs font-medium text-muted-foreground"
              >Alerts</span
            >
          </span>
        </a>
      </li>
    </ul>
    <div class="mt-8 flex justify-center lg:mt-10">
      <a
        href="/browse-all-integrations"
        title="Browse all integrations"
        class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-4 py-2.5 rounded-tk flex"
        data-tk-hover="press"
      >
        Browse all integrations
        <svg
          class="shrink-0 text-muted-foreground ml-2 h-4"
          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>
  </div>
</section>
Tailwind Integrations Components & Sections

FREE INTEGRATIONS SECTIONS · COPY AND PASTE

Integrations: Searchable Integrations Grid

Works with the tools you already use

4 MORE INTEGRATIONS SECTIONS IN TAILKITS UI

Integrations 2

Integrations 3

Integrations 4

Integrations 5

MORE TAILWIND SECTIONS

Frequently asked questions
