COMPONENTS · SECTIONS

Tailwind How It Works Components & Sections

Organise content with Tailwind How it works section. ARIA-labeled, keyboard-navigable and animated indicators for a snappy UX.

20 sections2 freeTailwind CSS v4HTML · React · MCP

Pick sectionsTailkits UI

FREE HOW IT WORKS SECTIONS · COPY AND PASTE

All free sections

How it works: Center Header with Pills

Center header with pill tabs leading into a pastel panel

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-how-it-works-1.json
View HTML code
<section class="pt-12 lg:pt-16 pb-12 lg:pb-16">
  <div class="max-w-7xl mx-auto px-4 xl:px-0 flex flex-col gap-y-6">
    <div class="flex flex-col items-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"
      >
        Introducing saaslandings
      </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-8 text-center sm:mx-auto sm:w-2/3 md:w-3/4 lg:mt-9 lg:leading-tight xl:w-3/5"
      >
        SaaS Design Made Easy
      </h2>
      <p
        class="text-sm font-medium text-tk-ink-soft leading-normal lg:leading-normal lg:text-base mt-4 text-center sm:mx-auto sm:w-2/3 md:w-1/2 xl:w-2/5"
      >
        Streamline your projects with our comprehensive collection of design
        resources and stay ahead in the competitive SaaS market
      </p>
      <div
        class="hidden shrink-0 items-center gap-x-1.5 rounded-full bg-muted p-1.5 lg:mt-9 lg:flex"
      >
        <button
          type="button"
          aria-pressed="true"
          class="flex items-center cursor-pointer justify-center hover:text-muted-foreground transition gap-x-2 whitespace-nowrap rounded-full px-4 py-1.5 font-medium text-card-foreground shadow-tk-md bg-background"
        >
          <svg
            class="h-4 shrink-0 text-muted-foreground"
            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>
          Analytics
        </button>
        <button
          type="button"
          aria-pressed="false"
          class="flex items-center cursor-pointer justify-center hover:text-muted-foreground transition gap-x-2 whitespace-nowrap rounded-full px-4 py-1.5 font-medium text-card-foreground"
        >
          <svg
            class="h-4 shrink-0 text-muted-foreground"
            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>
          Integration
        </button>
        <button
          type="button"
          aria-pressed="false"
          class="flex items-center cursor-pointer justify-center hover:text-muted-foreground transition gap-x-2 whitespace-nowrap rounded-full px-4 py-1.5 font-medium text-card-foreground"
        >
          <svg
            class="h-4 shrink-0 text-muted-foreground"
            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>
          Interface
        </button>
      </div>
      <details class="group relative mt-8 w-full sm:w-1/2 md:w-2/5 lg:hidden">
        <summary
          class="flex cursor-pointer select-none list-none items-center gap-x-3 rounded-full border border-tk-border-soft bg-background p-3 text-sm font-medium text-card-foreground shadow-tk-sm transition hover:border-border hover:bg-muted hover:shadow-tk-focus focus:shadow-tk-focus group-open:shadow-tk-focus"
        >
          <svg
            class="shrink-0 h-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
              fill-rule="evenodd"
              d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM6.262 6.072a8.25 8.25 0 1 0 10.562-.766 4.5 4.5 0 0 1-1.318 1.357L14.25 7.5l.165.33a.809.809 0 0 1-1.086 1.085l-.604-.302a1.125 1.125 0 0 0-1.298.21l-.132.131c-.439.44-.439 1.152 0 1.591l.296.296c.256.257.622.374.98.314l1.17-.195c.323-.054.654.036.905.245l1.33 1.108c.32.267.46.694.358 1.1a8.7 8.7 0 0 1-2.288 4.04l-.723.724a1.125 1.125 0 0 1-1.298.21l-.153-.076a1.125 1.125 0 0 1-.622-1.006v-1.089c0-.298-.119-.585-.33-.796l-1.347-1.347a1.125 1.125 0 0 1-.21-1.298L9.75 12l-1.64-1.64a6 6 0 0 1-1.676-3.257l-.172-1.03Z"
              clip-rule="evenodd"
            />
          </svg>
          <span class="flex-1 text-left text-card-foreground"
            >Select option</span
          >
          <svg
            class="shrink-0 h-5 text-muted-foreground group-open:rotate-180 transition-transform duration-200 motion-reduce:transition-none"
            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.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"
              clip-rule="evenodd"
            />
          </svg>
        </summary>
        <div
          class="absolute left-0 top-full z-10 mt-2 w-full overflow-hidden rounded-tk-2xl border border-tk-border-soft bg-background shadow-tk-popover"
        >
          <button
            class="flex w-full cursor-pointer select-none items-center gap-x-3 whitespace-nowrap p-3 text-sm font-medium text-card-foreground transition first:rounded-t-tk-2xl last:rounded-b-tk-2xl hover:bg-secondary focus:bg-secondary focus:outline-none"
            type="button"
          >
            <svg
              class="shrink-0 h-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
                fill-rule="evenodd"
                d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM6.262 6.072a8.25 8.25 0 1 0 10.562-.766 4.5 4.5 0 0 1-1.318 1.357L14.25 7.5l.165.33a.809.809 0 0 1-1.086 1.085l-.604-.302a1.125 1.125 0 0 0-1.298.21l-.132.131c-.439.44-.439 1.152 0 1.591l.296.296c.256.257.622.374.98.314l1.17-.195c.323-.054.654.036.905.245l1.33 1.108c.32.267.46.694.358 1.1a8.7 8.7 0 0 1-2.288 4.04l-.723.724a1.125 1.125 0 0 1-1.298.21l-.153-.076a1.125 1.125 0 0 1-.622-1.006v-1.089c0-.298-.119-.585-.33-.796l-1.347-1.347a1.125 1.125 0 0 1-.21-1.298L9.75 12l-1.64-1.64a6 6 0 0 1-1.676-3.257l-.172-1.03Z"
                clip-rule="evenodd"
              />
            </svg>
            Analytics
          </button>
          <button
            class="flex w-full cursor-pointer select-none items-center gap-x-3 whitespace-nowrap p-3 text-sm font-medium text-card-foreground transition first:rounded-t-tk-2xl last:rounded-b-tk-2xl hover:bg-secondary focus:bg-secondary focus:outline-none"
            type="button"
          >
            <svg
              class="shrink-0 h-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
                fill-rule="evenodd"
                d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM6.262 6.072a8.25 8.25 0 1 0 10.562-.766 4.5 4.5 0 0 1-1.318 1.357L14.25 7.5l.165.33a.809.809 0 0 1-1.086 1.085l-.604-.302a1.125 1.125 0 0 0-1.298.21l-.132.131c-.439.44-.439 1.152 0 1.591l.296.296c.256.257.622.374.98.314l1.17-.195c.323-.054.654.036.905.245l1.33 1.108c.32.267.46.694.358 1.1a8.7 8.7 0 0 1-2.288 4.04l-.723.724a1.125 1.125 0 0 1-1.298.21l-.153-.076a1.125 1.125 0 0 1-.622-1.006v-1.089c0-.298-.119-.585-.33-.796l-1.347-1.347a1.125 1.125 0 0 1-.21-1.298L9.75 12l-1.64-1.64a6 6 0 0 1-1.676-3.257l-.172-1.03Z"
                clip-rule="evenodd"
              />
            </svg>
            Integration
          </button>
          <button
            class="flex w-full cursor-pointer select-none items-center gap-x-3 whitespace-nowrap p-3 text-sm font-medium text-card-foreground transition first:rounded-t-tk-2xl last:rounded-b-tk-2xl hover:bg-secondary focus:bg-secondary focus:outline-none"
            type="button"
          >
            <svg
              class="shrink-0 h-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
                fill-rule="evenodd"
                d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM6.262 6.072a8.25 8.25 0 1 0 10.562-.766 4.5 4.5 0 0 1-1.318 1.357L14.25 7.5l.165.33a.809.809 0 0 1-1.086 1.085l-.604-.302a1.125 1.125 0 0 0-1.298.21l-.132.131c-.439.44-.439 1.152 0 1.591l.296.296c.256.257.622.374.98.314l1.17-.195c.323-.054.654.036.905.245l1.33 1.108c.32.267.46.694.358 1.1a8.7 8.7 0 0 1-2.288 4.04l-.723.724a1.125 1.125 0 0 1-1.298.21l-.153-.076a1.125 1.125 0 0 1-.622-1.006v-1.089c0-.298-.119-.585-.33-.796l-1.347-1.347a1.125 1.125 0 0 1-.21-1.298L9.75 12l-1.64-1.64a6 6 0 0 1-1.676-3.257l-.172-1.03Z"
                clip-rule="evenodd"
              />
            </svg>
            Interface
          </button>
        </div>
      </details>
    </div>
    <figure
      data-tk-motion="reveal scale"
      class="relative h-52 overflow-hidden rounded-tk-xl bg-gradient-to-b from-tk-tint-5 to-tk-tint-6 sm:mx-auto sm:w-2/3 md:h-60 md:rounded-tk-2xl lg:mx-4 lg:h-[28rem] lg:w-full lg:rounded-tk-3xl xl:mx-8 xl:h-[37.5rem]"
    >
      <img
        class="absolute left-1/2 top-6 h-52 w-11/12 -translate-x-1/2 rounded-md border-4 border-foreground/5 object-cover object-left-top shadow-tk-md sm:h-auto lg:top-16 lg:rounded-tk-2xl xl:top-24"
        src="https://tailkits.com/ui/iframe/assets/img/browser-mock-up-1.png"
        alt="Browser Mockup"
      />
    </figure>
  </div>
</section>

How it works: Vertical List with Preview

Vertical tab list with highlight beside a pastel browser preview

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-how-it-works-2.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 flex flex-col">
    <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"
      >
        Introducing saaslandings
      </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 lg:mt-8 lg:w-5/6 lg:leading-tight xl:w-3/4"
      >
        Design Your SaaS Future
      </h2>
      <p class="mt-4 text-sm font-medium text-tk-ink-soft sm:w-1/2 lg:w-2/5">
        Empower your projects with cutting-edge design resources tailored
        specifically for SaaS and foster user engagement
      </p>
    </div>
    <div class="mt-6 border-b border-b-tk-border-soft"></div>
    <div
      class="mt-6 flex flex-col gap-y-6 sm:px-4 lg:mt-9 lg:flex-row lg:gap-x-9 lg:gap-y-0 lg:px-8"
    >
      <div
        data-tk-motion="stagger slide"
        class="flex flex-col gap-y-4 sm:mx-auto sm:w-7/12 md:w-1/2 lg:mx-0 lg:mb-20 lg:w-2/5 lg:gap-y-6 xl:w-1/3"
      >
        <article class="flex flex-col items-start">
          <figure>
            <svg
              class="h-6 text-tk-ink-faint lg:h-8"
              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 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 0 0-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634Zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 0 1-.189-.866c0-.298.059-.605.189-.866Zm2.023 6.828a.75.75 0 1 0-1.06-1.06 3.75 3.75 0 0 1-5.304 0 .75.75 0 0 0-1.06 1.06 5.25 5.25 0 0 0 7.424 0Z"
                clip-rule="evenodd"
              />
            </svg>
          </figure>
          <h3
            class="mt-3 font-bold text-card-foreground md:text-lg lg:mt-4 xl:text-xl"
          >
            Advanced Analytics
          </h3>
          <p class="mt-2 text-sm font-medium text-muted-foreground">
            Goes beyond surface-level data, delving deep into your information
            to reveal crucial insights.
          </p>
        </article>
        <article class="flex flex-col items-start opacity-75">
          <figure>
            <svg
              class="h-6 text-tk-ink-faint lg:h-8"
              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 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 0 0-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634Zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 0 1-.189-.866c0-.298.059-.605.189-.866Zm2.023 6.828a.75.75 0 1 0-1.06-1.06 3.75 3.75 0 0 1-5.304 0 .75.75 0 0 0-1.06 1.06 5.25 5.25 0 0 0 7.424 0Z"
                clip-rule="evenodd"
              />
            </svg>
          </figure>
          <h3
            class="mt-3 font-bold text-card-foreground md:text-lg lg:mt-4 xl:text-xl"
          >
            Seamless Integration
          </h3>
          <p class="hidden">
            Say goodbye to silos and hello to smooth data flow across platforms.
          </p>
        </article>
        <article class="flex flex-col items-start opacity-75">
          <figure>
            <svg
              class="h-6 text-tk-ink-faint lg:h-8"
              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 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 0 0-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634Zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 0 1-.189-.866c0-.298.059-.605.189-.866Zm2.023 6.828a.75.75 0 1 0-1.06-1.06 3.75 3.75 0 0 1-5.304 0 .75.75 0 0 0-1.06 1.06 5.25 5.25 0 0 0 7.424 0Z"
                clip-rule="evenodd"
              />
            </svg>
          </figure>
          <h3
            class="mt-3 font-bold text-card-foreground md:text-lg lg:mt-4 xl:text-xl"
          >
            Intuitive User Interface
          </h3>
          <p class="hidden">
            Designed with you in mind, interface offers a seamless and
            user-friendly platform.
          </p>
        </article>
      </div>
      <div class="flex grow">
        <figure
          class="relative h-52 w-full overflow-hidden rounded-tk-xl bg-tk-surface-3 sm:mx-auto sm:w-2/3 md:h-60 md:rounded-tk-2xl lg:h-full lg:w-full lg:rounded-tk-3xl"
        >
          <img
            class="absolute left-8 top-6 h-80 rounded-md border-4 border-foreground/5 object-cover object-left-top shadow-tk-md sm:left-12 sm:top-12 lg:left-16 lg:top-24 lg:h-[35rem] lg:w-full lg:rounded-tk-2xl"
            src="https://tailkits.com/ui/iframe/assets/img/browser-mock-up-1.png"
            alt="Browser Mockup"
          />
        </figure>
      </div>
    </div>
  </div>
</section>

18 MORE HOW IT WORKS SECTIONS IN TAILKITS UI

See plans

HOW IT WORKS SECTIONS FROM OTHER LIBRARIES

All component libraries

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

Tailark

Freemium

Free and Pro shadcn/ui marketing blocks and pages

MORE TAILWIND SECTIONS

Hero 31Features 23Testimonial 13Footer 12Pricing 10Call to Action 9Navbar 9Newsletter 9Blog 7Contact 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 how it works components.

Are these Tailwind how it works sections free?

2 of the 20 how it works sections on this page are free (Center Header with Pills, Vertical List with Preview): copy the HTML above, no account needed. The other 18 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 how it works 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 how it works 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 how it works 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 how it works sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Which other libraries have Tailwind how it works components?

The directory lists 2 third-party libraries with how it works sections, including , . They are shown below our own sections, with their pricing and stack.