COMPONENTS · SECTIONS

Tailwind Features Components & Sections

Highlight product wins via Tailwind feature grids: icon + copy pairs, screenshot slots and dark-mode variants included.

23 sections4 freeTailwind CSS v4HTML · React · MCP

Pick sectionsTailkits UI

FREE FEATURES SECTIONS · COPY AND PASTE

All free sections

Features: Split Layout with List

Two-column layout with image on the left and feature bullets on the right.

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-features-2.json
View HTML code
<section class="pt-12 lg:pt-16 relative pt-52 lg:pb-16">
  <div
    class="max-w-7xl mx-auto px-4 xl:px-0 grid lg:grid-cols-2 lg:gap-x-20 xl:gap-x-40"
  >
    <div></div>
    <div class="mt-12 flex flex-col items-start lg:mt-0">
      <div
        class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-primary text-primary-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-3 lg:mt-4 lg:leading-tight"
      >
        Discover powerful advantages
      </h2>
      <p
        class="mt-3 text-sm font-medium text-tk-ink-soft sm:w-2/3 md:w-11/12 lg:mt-4 xl:w-3/4"
      >
        Embark on a journey of design exploration to craft extraordinary SaaS
        experiences that captivate and convert
      </p>
      <ul
        data-tk-motion="stagger"
        class="mt-8 flex flex-col items-start gap-y-2 lg:mt-9"
      >
        <li class="flex items-center gap-x-4">
          <svg
            class="h-5 shrink-0 text-tk-ink-soft"
            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="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
              clip-rule="evenodd"
            />
          </svg>
          <p class="text-sm font-medium text-muted-foreground">
            Advanced Analytics
          </p>
        </li>
        <li class="flex items-center gap-x-4">
          <svg
            class="h-5 shrink-0 text-tk-ink-soft"
            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="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
              clip-rule="evenodd"
            />
          </svg>
          <p class="text-sm font-medium text-muted-foreground">
            Seamless Integration
          </p>
        </li>
        <li class="flex items-center gap-x-4">
          <svg
            class="h-5 shrink-0 text-tk-ink-soft"
            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="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
              clip-rule="evenodd"
            />
          </svg>
          <p class="text-sm font-medium text-muted-foreground">
            24/7 Customer Support
          </p>
        </li>
        <li class="flex items-center gap-x-4">
          <svg
            class="h-5 shrink-0 text-tk-ink-soft"
            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="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
              clip-rule="evenodd"
            />
          </svg>
          <p class="text-sm font-medium text-muted-foreground">
            Intuitive User Interface
          </p>
        </li>
        <li class="flex items-center gap-x-4">
          <svg
            class="h-5 shrink-0 text-tk-ink-soft"
            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="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
              clip-rule="evenodd"
            />
          </svg>
          <p class="text-sm font-medium text-muted-foreground">
            Dynamic Reporting
          </p>
        </li>
      </ul>
    </div>
  </div>
  <img
    class="absolute left-0 top-0 h-52 w-full object-cover object-left-top lg:h-full lg:w-1/2"
    src="https://tailkits.com/ui/iframe/assets/img/bg-linear-6.png"
    alt=""
  />
</section>

Features: Gradient Two Columns

Gradient background with heading and dual feature highlights side by side.

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-features-1.json
View HTML code
<section
  class="pt-12 lg:pt-16 bg-gradient-to-b from-tk-tint-1 via-tk-tint-2 to-background pb-12 lg:pb-24"
>
  <div class="max-w-7xl mx-auto px-4 xl:px-0 flex flex-col items-start">
    <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 sm:w-2/3 md:w-3/4 lg:mt-9 lg:leading-tight xl:w-3/5"
    >
      Features that set us apart
    </h2>
    <div
      data-tk-motion="stagger"
      class="mt-12 grid gap-y-6 md:grid-cols-2 md:gap-x-4 lg:mt-16 lg:gap-x-9 lg:gap-y-0"
    >
      <div class="flex flex-col gap-y-3 lg:gap-y-4">
        <h3 class="text-xl font-medium text-card-foreground lg:text-2xl">
          Advanced Analytics
        </h3>
        <p
          class="text-sm font-medium text-tk-text-soft sm:w-2/3 md:w-11/12 xl:w-2/3"
        >
          Unleash the power of design synergy to create seamless and intuitive
          SaaS solutions that delight users
        </p>
      </div>
      <div class="flex flex-col gap-y-3 lg:gap-y-4">
        <h3 class="text-xl font-medium text-card-foreground lg:text-2xl">
          Seamless Integration
        </h3>
        <p
          class="text-sm font-medium text-tk-text-soft sm:w-2/3 md:w-11/12 xl:w-2/3"
        >
          Embark on a journey of design exploration to craft extraordinary SaaS
          experiences that captivate and convert
        </p>
      </div>
    </div>
  </div>
</section>

Features: Icon Row Highlights

Row of icon headings emphasising analytics, integration and intuitive UI with descriptions

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-features-3.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 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-6 text-center sm:mx-auto sm:w-1/2 md:mt-8 md:w-2/5 lg:w-1/2 lg:leading-tight xl:mt-9 xl:w-2/5"
    >
      Design Resources for SaaS Success
    </h2>
    <div
      data-tk-motion="stagger"
      class="mt-12 grid gap-y-6 md:px-4 lg:mt-16 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-0 lg:px-8"
    >
      <article
        class="flex flex-col items-start sm:mx-auto sm:w-2/3 lg:mx-0 lg:w-4/5 xl:w-2/3"
      >
        <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="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm4.5 7.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75Zm3.75-1.5a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0V12Zm2.25-3a.75.75 0 0 1 .75.75v6.75a.75.75 0 0 1-1.5 0V9.75A.75.75 0 0 1 13.5 9Zm3.75-1.5a.75.75 0 0 0-1.5 0v9a.75.75 0 0 0 1.5 0v-9Z"
              clip-rule="evenodd"
            />
          </svg>
        </figure>
        <h3
          class="mt-4 font-bold text-card-foreground md:text-lg lg:mt-6 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 sm:mx-auto sm:w-2/3 lg:mx-0 lg:w-4/5 xl:w-2/3"
      >
        <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="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>
        </figure>
        <h3
          class="mt-4 font-bold text-card-foreground md:text-lg lg:mt-6 xl:text-xl"
        >
          Seamless Integration
        </h3>
        <p class="mt-2 text-sm font-medium text-muted-foreground">
          Say goodbye to silos and hello to smooth data flow across platforms.
        </p>
      </article>
      <article
        class="flex flex-col items-start sm:mx-auto sm:w-2/3 lg:mx-0 lg:w-4/5 xl:w-2/3"
      >
        <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 d="M10.5 18.75a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z" />
            <path
              fill-rule="evenodd"
              d="M8.625.75A3.375 3.375 0 0 0 5.25 4.125v15.75a3.375 3.375 0 0 0 3.375 3.375h6.75a3.375 3.375 0 0 0 3.375-3.375V4.125A3.375 3.375 0 0 0 15.375.75h-6.75ZM7.5 4.125C7.5 3.504 8.004 3 8.625 3H9.75v.375c0 .621.504 1.125 1.125 1.125h2.25c.621 0 1.125-.504 1.125-1.125V3h1.125c.621 0 1.125.504 1.125 1.125v15.75c0 .621-.504 1.125-1.125 1.125h-6.75A1.125 1.125 0 0 1 7.5 19.875V4.125Z"
              clip-rule="evenodd"
            />
          </svg>
        </figure>
        <h3
          class="mt-4 font-bold text-card-foreground md:text-lg lg:mt-6 xl:text-xl"
        >
          Intuitive User Interface
        </h3>
        <p class="mt-2 text-sm font-medium text-muted-foreground">
          Designed with you in mind, interface offers a seamless and
          user-friendly platform.
        </p>
      </article>
    </div>
  </div>
</section>

Features: Horizontal Detail Cards

Horizontal cards for “Advanced Analytics” and “Seamless Integration” with details

Free
Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-features-4.json
View HTML code
<section class="pt-12 lg:pt-16 bg-tk-surface pb-12 lg:pb-16">
  <h2 class="sr-only">Features</h2>
  <div class="max-w-7xl mx-auto px-4 xl:px-0">
    <div
      data-tk-motion="stagger"
      class="grid gap-y-6 md:grid-cols-2 md:gap-x-9 md:gap-y-0 md:px-4 lg:px-20 xl:px-32"
    >
      <article class="flex flex-col items-start gap-y-4 lg:gap-y-6">
        <figure>
          <svg
            class="h-6 text-tk-ink-faint md:h-7 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="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm4.5 7.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75Zm3.75-1.5a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0V12Zm2.25-3a.75.75 0 0 1 .75.75v6.75a.75.75 0 0 1-1.5 0V9.75A.75.75 0 0 1 13.5 9Zm3.75-1.5a.75.75 0 0 0-1.5 0v9a.75.75 0 0 0 1.5 0v-9Z"
              clip-rule="evenodd"
            />
          </svg>
        </figure>
        <div class="lg:w-4/5 xl:w-3/4">
          <h3
            class="text-xl font-medium text-card-foreground md:text-2xl xl:text-3xl"
          >
            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>
        </div>
        <a
          href="/features"
          title="See detail"
          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-3 py-2 rounded-tk flex"
          data-tk-hover="press"
        >
          See detail
          <svg
            class="shrink-0 text-muted-foreground ml-1.5 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>
      </article>
      <article class="flex flex-col items-start gap-y-4 lg:gap-y-6">
        <figure>
          <svg
            class="h-6 text-tk-ink-faint md:h-7 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="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>
        </figure>
        <div class="lg:w-4/5 xl:w-3/4">
          <h3
            class="text-xl font-medium text-card-foreground md:text-2xl xl:text-3xl"
          >
            Seamless Integration
          </h3>
          <p class="mt-2 text-sm font-medium text-muted-foreground">
            Say goodbye to silos and hello to smooth data flow across platforms.
          </p>
        </div>
        <a
          href="/features"
          title="See detail"
          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-3 py-2 rounded-tk flex"
          data-tk-hover="press"
        >
          See detail
          <svg
            class="shrink-0 text-muted-foreground ml-1.5 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>
      </article>
    </div>
  </div>
</section>

19 MORE FEATURES SECTIONS IN TAILKITS UI

See plans

FEATURES SECTIONS FROM OTHER LIBRARIES

All component libraries

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

Prime UI

Paid

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

Tailark

Freemium

Free and Pro shadcn/ui marketing blocks and pages

Htmlwind

Paid

225+ responsive Tailwind CSS components

Flowrift

Free

80+ ready-made Tailwind CSS components

MORE TAILWIND SECTIONS

Hero 31How It Works 20Testimonial 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 features components.

Are these Tailwind features sections free?

4 of the 23 features sections on this page are free (Split Layout with List, Gradient Two Columns, Icon Row Highlights, Horizontal Detail Cards): copy the HTML above, no account needed. The other 19 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 features 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 features 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 features 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 features sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Which other libraries have Tailwind features components?

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