Tailkits UI Free Components (tailkits/tailkits-ui)

Tailkits UI Free Components

https://github.com/tailkits/tailkits-ui
Admin
Tailkits UI Free Components is a modern library offering 30+ open-source, customizable, and...

Tokens:9,884
Snippets:14
Trust Score:6
Update:6 months ago
Show doc for...
Context Summary (auto-generated)
Raw
# Tailkits UI - Free Components Library

## Introduction

Tailkits UI is a modern, open-source library of copy-paste ready UI components built with Tailwind CSS. This free version provides 30+ production-ready HTML components across 17+ categories, designed to accelerate web development for SaaS products, landing pages, and modern web applications. Each component is crafted with semantic HTML, accessibility in mind, and mobile-first responsive design principles.

The library requires no configuration or build process - components use Tailwind's default utility classes and can be directly copied into any project. Components include navigation elements, hero sections, feature showcases, pricing tables, testimonials, contact sections, footers, and more. All components follow consistent design patterns with gradient text effects, rounded corners, shadow utilities, and smooth transitions, making it easy to build cohesive, professional interfaces rapidly.

---

## Components Documentation

### Navbar Component

Responsive navigation header with logo, menu links, action buttons, and mobile menu toggle. Features desktop navigation with inline links and collapsible mobile menu button.

```html
<header class="py-4">
  <div class="max-w-7xl mx-auto px-4 xl:px-0 flex items-center justify-between gap-x-4 lg:grid lg:grid-cols-[1fr_auto_1fr] lg:justify-stretch lg:gap-x-12">
    <a href="/" title="Home">
      <img class="h-8" src="https://tailkits.com/ui/iframe/assets/img/logo.svg" alt="Logo" />
    </a>
    <nav class="hidden lg:block">
      <ul class="flex items-center">
        <li>
          <a class="px-3 py-2 text-sm font-medium text-neutral-700 transition hover:text-neutral-600" href="#">Features</a>
        </li>
        <li>
          <a class="px-3 py-2 text-sm font-medium text-neutral-700 transition hover:text-neutral-600" href="#">About</a>
        </li>
        <li>
          <a class="px-3 py-2 text-sm font-medium text-neutral-700 transition hover:text-neutral-600" href="#">Pricing</a>
        </li>
      </ul>
    </nav>
    <div class="flex flex-wrap items-center justify-center gap-3 justify-self-end lg:flex-nowrap lg:gap-x-2">
      <a href="#" title="Log in" class="items-center justify-center whitespace-nowrap text-sm font-medium transition-all focus:shadow-[0_0px_0px_2px_rgba(15,23,42,0.25),0_2px_10px_0px_rgba(0,0,0,0.05)] shadow-[0_2px_10px_0px_rgba(0,0,0,0.05)] border border-neutral-100 bg-white text-neutral-700 hover:border-neutral-200 hover:bg-neutral-100 disabled:border-slate-900/5 disabled:bg-slate-50/30 disabled:text-slate-900/20 px-3 py-2 rounded-[0.625rem] hidden lg:flex">
        Log in
      </a>
      <a href="#" title="Open an account" class="items-center justify-center whitespace-nowrap text-sm font-medium transition-all focus:shadow-[0_0px_0px_2px_rgba(15,23,42,0.25),0_2px_10px_0px_rgba(0,0,0,0.05)] shadow-[0_2px_10px_0px_rgba(0,0,0,0.05)] bg-slate-900 text-white hover:bg-slate-800 disabled:bg-slate-900/30 disabled:text-slate-50/70 px-3 py-2 rounded-[0.625rem] flex">
        Open an account
      </a>
      <button type="button" aria-label="Open menu" class="lg:hidden" title="Open menu">
        <svg class="h-6 text-slate-500" 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 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
  </div>
</header>
```

### Hero Section with Image

Full-width hero section with announcement badge, gradient headline, description, call-to-action buttons, and feature image with shadow effects.

```html
<section class="relative overflow-hidden py-16 lg:py-24">
  <div class="max-w-7xl mx-auto px-4 xl:px-0">
    <div 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 xl:gap-x-16 xl:px-10">
      <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-[0_2px_10px_0px_rgba(0,0,0,0.15)] inline-flex bg-white text-neutral-700 px-2.5 py-1">
          Introducing saaslandings
        </div>
        <div class="bg-gradient-to-b from-slate-800 to-slate-600 bg-clip-text text-3xl font-semibold text-transparent lg:text-5xl mt-4 sm:mx-auto sm:w-2/3 sm:text-center md:w-1/2 lg:mx-0 lg:mt-6 lg:w-5/6 lg:text-left lg:leading-tight">
          Transforming SaaS Experiences
        </div>
        <p class="mt-4 font-medium text-slate-600 sm:mx-auto sm:w-2/3 sm:text-center md:w-1/2 lg:mx-0 lg:mt-6 lg:w-11/12 lg:text-left">
          Unlock the power of design to transmute your SaaS projects into extraordinary solutions that inspire, engage, and amaze
        </p>
        <div class="mt-8 flex flex-wrap items-center justify-center gap-3 lg:mt-12">
          <a href="#" title="Learn more" class="items-center justify-center whitespace-nowrap text-sm font-medium transition-all focus:shadow-[0_0px_0px_2px_rgba(15,23,42,0.25),0_2px_10px_0px_rgba(0,0,0,0.05)] shadow-[0_2px_10px_0px_rgba(0,0,0,0.05)] border border-neutral-100 bg-white text-neutral-700 hover:border-neutral-200 hover:bg-neutral-100 disabled:border-slate-900/5 disabled:bg-slate-50/30 disabled:text-slate-900/20 px-4 py-2.5 rounded-[0.625rem] flex">
            <svg class="shrink-0 mr-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="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>
            Learn more
            <svg class="shrink-0 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>
          <a href="#" title="Try free" class="items-center justify-center whitespace-nowrap text-sm font-medium transition-all focus:shadow-[0_0px_0px_2px_rgba(15,23,42,0.25),0_2px_10px_0px_rgba(0,0,0,0.05)] shadow-[0_2px_10px_0px_rgba(0,0,0,0.05)] bg-slate-900 text-white hover:bg-slate-800 disabled:bg-slate-900/30 disabled:text-slate-50/70 px-4 py-2.5 rounded-[0.625rem] flex">
            Try free
            <span class="ml-1 text-slate-400"> - 14 days</span>
          </a>
        </div>
      </div>
      <figure class="relative h-52 w-full overflow-hidden rounded-3xl bg-slate-50/50 before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:blur-[2px] lg:h-full">
        <img class="absolute left-6 top-6 h-96 rounded-2xl border-4 border-slate-900/5 object-cover object-left-top shadow-[0_2px_10px_0px_rgba(0,0,0,0.15)] sm:left-1/2 sm:-translate-x-1/2 sm:object-contain lg:left-12 lg:top-12 lg:h-[30rem] lg:translate-x-0 lg:object-cover xl:h-[35rem]" src="https://tailkits.com/ui/iframe/assets/img/browser-mock-up-2.png" alt="Browser mockup" />
      </figure>
    </div>
  </div>
</section>
```

### Features Grid

Two-column grid layout showcasing product features with gradient background, badge, headline, and feature cards with titles and descriptions.

```html
<section class="pt-12 lg:pt-16 bg-gradient-to-b from-[#E9EAFF] via-[#E7FCFF] to-white 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-[0_2px_10px_0px_rgba(0,0,0,0.15)] inline-flex bg-white text-neutral-700 px-2.5 py-1">
      Introducing saaslandings
    </div>
    <div class="bg-gradient-to-b from-slate-800 to-slate-600 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
    </div>
    <div 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">
        <div class="text-xl font-medium text-neutral-700 lg:text-2xl">
          Advanced Analytics
        </div>
        <p class="text-sm font-medium text-neutral-500 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">
        <div class="text-xl font-medium text-neutral-700 lg:text-2xl">
          Seamless Integration
        </div>
        <p class="text-sm font-medium text-neutral-500 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>
```

### Pricing Section

Centered pricing card with toggle for monthly/annual billing, feature list with checkmarks, pricing display, and call-to-action button.

```html
<section class="pt-12 lg:pt-16 bg-slate-50 pb-8 lg:pb-16">
  <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-[0_2px_10px_0px_rgba(0,0,0,0.15)] inline-flex bg-white text-neutral-700 px-2.5 py-1">
      Get full access
    </div>
    <div class="mx-auto mt-8 bg-gradient-to-b from-slate-800 to-slate-600 bg-clip-text text-center text-3xl font-semibold text-transparent sm:w-4/5 md:w-3/5 lg:mt-9 lg:text-4xl lg:leading-tight xl:w-7/12">
      Simple solution. <br />
      One price.
    </div>
    <p class="text-sm font-medium text-slate-600 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">
      Unlock the power of stunning design for your SaaS projects and create a memorable user experience that drives growth and customer satisfaction
    </p>
    <div class="mt-6 flex w-full flex-col sm:mx-auto sm:w-2/3 lg:mt-12 lg:w-1/2">
      <div class="flex items-end justify-center gap-x-3">
        <div class="text-4xl font-semibold text-slate-900">$28</div>
        <span class="text-lg text-slate-600">/ month</span>
      </div>
      <div class="mt-4 flex flex-wrap items-center justify-center gap-4 lg:mt-6">
        <span class="text-sm text-neutral-500">monthly</span>
        <div class="relative rounded-full h-6 w-11 bg-green-500">
          <span class="absolute top-1/2 -translate-y-1/2 rounded-full bg-white shadow-[0_2px_10px_0px_rgba(0,0,0,0.15)] h-5 w-5 right-0.5"></span>
        </div>
        <span class="text-sm text-neutral-500">annually</span>
        <div class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-[0_2px_10px_0px_rgba(0,0,0,0.15)] inline-flex bg-white text-neutral-700 px-2 py-0.5">
          save 20%
        </div>
      </div>
      <div class="mt-6 w-full border-b border-b-neutral-100 lg:mt-12"></div>
      <div class="mt-6 flex flex-wrap justify-between gap-3 sm:flex-nowrap sm:justify-stretch sm:gap-y-0 lg:mt-12 lg:gap-x-12">
        <ul class="flex flex-col items-start gap-y-2 sm:w-full">
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg class="h-5 shrink-0 text-slate-600" 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-neutral-500">Unlimited Projects</p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg class="h-5 shrink-0 text-slate-600" 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-neutral-500">Advanced Analytics</p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg class="h-5 shrink-0 text-slate-600" 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-neutral-500">Integration</p>
          </li>
        </ul>
        <ul class="flex flex-col items-start gap-y-2 sm:w-full">
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg class="h-5 shrink-0 text-slate-600" 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-neutral-500">Custom Branding</p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg class="h-5 shrink-0 text-slate-600" 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-neutral-500">Customer Support</p>
          </li>
          <li class="flex items-center gap-x-2 lg:gap-x-4">
            <svg class="h-5 shrink-0 text-slate-600" 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-neutral-500">Data Security</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>
```

### Testimonial Component

Centered testimonial card with avatar image, quoted text, author name with badge, company logo, and navigation dots for carousel functionality.

```html
<section class="py-16 lg:py-24 bg-gradient-to-b from-[#E9FFFE] via-[#F6FFE7] to-white">
  <div class="max-w-7xl mx-auto px-4 xl:px-0 relative">
    <figure class="flex flex-col items-center gap-y-6 sm:mx-auto sm:w-2/3 xl:w-1/2 xl:gap-y-9">
      <img class="h-12 w-12 shrink-0 rounded-full object-cover md:h-16 md:w-16" src="https://tailkits.com/ui/iframe/assets/img/avatar-1.png" alt="Testimonial" />
      <blockquote class="flex flex-col items-center">
        <p class="text-center font-medium text-neutral-700 md:text-lg xl:text-xl">
          "We were impressed by the creativity and professionalism of SaaS Landings. Their design solutions have helped us stand out in a crowded market and attract new customers."
        </p>
        <div class="mt-6 flex flex-wrap items-center justify-center gap-4 xl:mt-9">
          <figcaption class="font-medium text-slate-700">
            Sarah Walker
          </figcaption>
          <div class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-[0_2px_10px_0px_rgba(0,0,0,0.15)] inline-flex bg-slate-300 text-slate-700 px-2 py-0.5">
            Marketing Manager
          </div>
        </div>
        <img class="mt-6 h-8 xl:mt-9" src="https://tailkits.com/ui/iframe/assets/img/logo-big.svg" alt="Logo" />
      </blockquote>
    </figure>
    <div class="mt-6 flex items-center justify-center gap-x-2 md:mt-9">
      <button class="h-2 w-2 shrink-0 rounded-full bg-slate-900" type="button" aria-label="Current testimonial"></button>
      <button class="h-2 w-2 shrink-0 cursor-pointer rounded-full bg-neutral-300 transition hover:bg-neutral-200" type="button" aria-label="Show the other testimonial"></button>
      <button class="h-2 w-2 shrink-0 cursor-pointer rounded-full bg-neutral-300 transition hover:bg-neutral-200" type="button" aria-label="Show the other testimonial"></button>
    </div>
  </div>
</section>
```

### Call-to-Action Section

Full-width CTA section with background image, centered badge, gradient headline, description text, and prominent action button with icons.

```html
<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-8.png" alt="Background image" />
  <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-[0_2px_10px_0px_rgba(0,0,0,0.15)] inline-flex bg-white text-neutral-700 px-2.5 py-1">
      Get full access
    </div>
    <div class="mx-auto mt-8 bg-gradient-to-b from-slate-800 to-slate-600 bg-clip-text text-center text-3xl font-semibold text-transparent sm:w-4/5 md:w-3/5 lg:mt-9 lg:text-4xl lg:leading-tight xl:w-7/12">
      Unleash the power of SaaS innovation: Ignite your success!
    </div>
    <p class="mt-4 text-center text-sm font-medium text-slate-600 sm:w-1/2 lg:w-2/5">
      Experience the next level of growth and innovation with our game-changing Saas solutions
    </p>
    <a href="#" title="Learn more" class="items-center justify-center whitespace-nowrap text-sm font-medium transition-all focus:shadow-[0_0px_0px_2px_rgba(15,23,42,0.25),0_2px_10px_0px_rgba(0,0,0,0.05)] shadow-[0_2px_10px_0px_rgba(0,0,0,0.05)] bg-slate-900 text-white hover:bg-slate-800 disabled:bg-slate-900/30 disabled:text-slate-50/70 px-4 py-2.5 rounded-[0.625rem] mt-8 flex md:mt-10 xl:mt-12">
      <svg class="shrink-0 mr-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="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>
      Learn more
      <svg class="shrink-0 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>
</section>
```

### Contact Section

Two-column layout with contact information and call-to-action on the left, decorative image on the right, featuring background image overlay.

```html
<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="Background image" />
  <div class="max-w-7xl mx-auto px-4 xl:px-0">
    <div 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-[0_2px_10px_0px_rgba(0,0,0,0.15)] inline-flex bg-white text-neutral-700 px-2.5 py-1">
          Contact
        </div>
        <div class="mt-8 bg-gradient-to-b from-slate-800 to-slate-600 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
        </div>
        <p class="mt-4 text-sm font-medium text-slate-600 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="#" title="Contact us" class="items-center justify-center whitespace-nowrap text-sm font-medium transition-all focus:shadow-[0_0px_0px_2px_rgba(15,23,42,0.25),0_2px_10px_0px_rgba(0,0,0,0.05)] shadow-[0_2px_10px_0px_rgba(0,0,0,0.05)] bg-slate-900 text-white hover:bg-slate-800 disabled:bg-slate-900/30 disabled:text-slate-50/70 px-5 py-3 rounded-xl mt-8 flex lg:mt-9">
          <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-3xl object-cover object-left-top lg:h-full" src="https://tailkits.com/ui/iframe/assets/img/bg-fade-6.png" alt="Features" />
    </div>
  </div>
</section>
```

### Footer Component

Multi-column footer with logo, navigation links organized by category, status badges, copyright text, and social media icon links.

```html
<footer class="py-16 lg:py-24">
  <div class="max-w-7xl mx-auto px-4 xl:px-0 flex flex-col gap-y-12">
    <div class="grid gap-y-6 sm:grid-cols-2 sm:gap-x-8 md:px-4 lg:grid-cols-4 lg:gap-x-12 lg:gap-y-0 lg:px-8">
      <figure>
        <img class="h-8" src="https://tailkits.com/ui/iframe/assets/img/logo-big.svg" alt="Logo" />
      </figure>
      <div class="flex flex-col items-start gap-y-4">
        <div class="text-sm font-bold text-neutral-700">Product</div>
        <div class="flex flex-col items-start gap-y-1.5">
          <div class="flex flex-wrap items-center gap-1">
            <a class="whitespace-nowrap text-sm font-medium text-neutral-500" href="#" title="Home">Home</a>
            <div class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-[0_2px_10px_0px_rgba(0,0,0,0.15)] inline-flex bg-slate-300 text-slate-700 px-2 py-0.5">
              we're hiring
            </div>
          </div>
          <a class="whitespace-nowrap text-sm font-medium text-neutral-500" href="#" title="Features">Features</a>
          <a class="whitespace-nowrap text-sm font-medium text-neutral-500" href="#" title="Blog">Blog</a>
          <a class="whitespace-nowrap text-sm font-medium text-neutral-500" href="#" title="Services">Services</a>
        </div>
      </div>
      <div class="flex flex-col items-start gap-y-4">
        <div class="text-sm font-bold text-neutral-700">Offers</div>
        <div class="flex flex-col items-start gap-y-1.5">
          <a class="whitespace-nowrap text-sm font-medium text-neutral-500" href="#" title="Overview">Overview</a>
          <a class="whitespace-nowrap text-sm font-medium text-neutral-500" href="#" title="Financial modeling">Financial modeling</a>
          <div class="flex flex-wrap items-center gap-1">
            <a class="whitespace-nowrap text-sm font-medium text-neutral-500" href="#" title="Expense tracking">Expense tracking</a>
            <div class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-[0_2px_10px_0px_rgba(0,0,0,0.15)] inline-flex bg-slate-300 text-slate-700 px-2 py-0.5">
              soon
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col items-start gap-y-4">
        <div class="text-sm font-bold text-neutral-700">Services</div>
        <div class="flex flex-col items-start gap-y-1.5">
          <a class="whitespace-nowrap text-sm font-medium text-neutral-500" href="#" title="Design process">Design process</a>
          <a class="whitespace-nowrap text-sm font-medium text-neutral-500" href="#" title="Business process">Business process</a>
          <div class="flex flex-wrap items-center gap-1">
            <a class="whitespace-nowrap text-sm font-medium text-neutral-500" href="#" title="Home">Rewards</a>
            <div class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-[0_2px_10px_0px_rgba(0,0,0,0.15)] inline-flex bg-slate-300 text-slate-700 px-2 py-0.5">
              beta
            </div>
          </div>
          <a class="whitespace-nowrap text-sm font-medium text-neutral-500" href="#" title="PRicing">Pricing</a>
        </div>
      </div>
    </div>
    <div class="border-b border-b-neutral-200"></div>
    <div class="flex flex-wrap items-center justify-between gap-4 md:px-4 lg:px-8">
      <div class="flex flex-wrap items-center gap-3 lg:gap-4">
        <div class="text-sm font-medium text-neutral-700">
          <time>2025</time>
          - Saas Landings. All rights reserved.
        </div>
      </div>
      <div class="flex flex-wrap items-center gap-4">
        <a href="#" title="Instagram" target="_blank">
          <svg class="h-5 text-slate-700" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7697 13.7693C14.1189 13.4202 14.3912 13.0019 14.5694 12.5413C14.7408 12.1003 14.858 11.5963 14.8917 10.8583C14.9254 10.1188 14.9334 9.88272 14.9334 7.99975C14.9334 6.11679 14.9254 5.88057 14.8917 5.14116C14.858 4.40316 14.7408 3.89919 14.5694 3.45817C14.3953 2.99555 14.1224 2.57645 13.7697 2.23014C13.4233 1.87737 13.0043 1.6044 12.5416 1.43028C12.1006 1.259 11.5966 1.14182 10.8585 1.10826C10.1192 1.07438 9.88305 1.06641 8.00005 1.06641C6.11706 1.06641 5.88087 1.07438 5.14147 1.10813C4.40346 1.14182 3.89948 1.259 3.45847 1.43041C2.99585 1.60451 2.57676 1.87741 2.23044 2.23012C1.87766 2.57641 1.60468 2.99549 1.43052 3.45814C1.25925 3.89918 1.14206 4.40316 1.10851 5.14116C1.07463 5.88057 1.06665 6.11676 1.06665 7.99975C1.06665 9.88275 1.07463 10.1189 1.10851 10.8583C1.1422 11.5963 1.25939 12.1003 1.43079 12.5413C1.60489 13.004 1.8778 13.423 2.2305 13.7693C2.57682 14.1221 2.9959 14.3949 3.45852 14.569C3.89957 14.7404 4.40355 14.8577 5.14152 14.8914C5.88103 14.9251 6.11714 14.9331 8.00011 14.9331C9.88308 14.9331 10.1193 14.9251 10.8587 14.8914C11.5967 14.8577 12.1007 14.7404 12.5416 14.569C13.0022 14.3909 13.4206 14.1186 13.7697 13.7693ZM2.13277 7.1837C2.13304 7.408 2.13337 7.67487 2.13337 7.99976C2.13337 8.32466 2.13304 8.59153 2.13277 8.81581C2.13171 9.69143 2.13144 9.9182 2.15426 10.4163C2.18265 11.0407 2.21676 11.4996 2.32092 11.8454C2.42106 12.1779 2.53337 12.5162 2.90004 12.9246C3.2667 13.333 3.62037 13.5179 4.07086 13.6538C4.52136 13.7896 5.08756 13.8188 5.57921 13.8412C6.13686 13.8667 6.35787 13.8666 7.5276 13.8663H8.00005C8.31256 13.8663 8.57139 13.8665 8.79028 13.8668C9.6874 13.8678 9.91385 13.868 10.4168 13.845C11.0413 13.8166 11.5001 13.7825 11.846 13.6784C12.1784 13.5782 12.5168 13.4659 12.9251 13.0992C13.3334 12.7325 13.5184 12.3788 13.6543 11.9284C13.7902 11.4778 13.8194 10.9116 13.8418 10.42C13.8672 9.86309 13.8671 9.64269 13.8669 8.47706V8.47695L13.8668 8.00016V7.52771C13.8671 6.35798 13.8672 6.13697 13.8417 5.57931C13.8193 5.08767 13.7901 4.52147 13.6543 4.07097C13.5184 3.62049 13.3334 3.26681 12.9251 2.90015C12.5168 2.53348 12.1783 2.42117 11.846 2.32103C11.5 2.21687 11.0412 2.18276 10.4167 2.15436C9.91381 2.13132 9.68739 2.13157 8.7903 2.13255C8.5714 2.1328 8.31257 2.13308 8.00005 2.13308L7.52749 2.133C6.35786 2.13269 6.13685 2.13263 5.57921 2.15807C5.08756 2.1805 4.52136 2.20969 4.07086 2.34556C3.62037 2.48144 3.2667 2.6664 2.90004 3.07474C2.53337 3.48307 2.42106 3.82146 2.32092 4.15391C2.21676 4.49973 2.18265 4.95861 2.15426 5.58307C2.13144 6.08114 2.13171 6.30802 2.13277 7.1837ZM7.99994 5.5999C6.67455 5.5999 5.60011 6.67434 5.60011 7.99973C5.60011 9.32512 6.67455 10.3996 7.99994 10.3996C9.32533 10.3996 10.3998 9.32512 10.3998 7.99973C10.3998 6.67434 9.32533 5.5999 7.99994 5.5999ZM4.53345 7.99973C4.53345 6.08523 6.08545 4.53323 7.99994 4.53323C9.91444 4.53323 11.4664 6.08523 11.4664 7.99973C11.4664 9.91423 9.91444 11.4662 7.99994 11.4662C6.08545 11.4662 4.53345 9.91423 4.53345 7.99973ZM11.701 5.09873C12.1428 5.09873 12.501 4.74056 12.501 4.29873C12.501 3.8569 12.1428 3.49873 11.701 3.49873C11.2592 3.49873 10.901 3.8569 10.901 4.29873C10.901 4.74056 11.2592 5.09873 11.701 5.09873Z" fill="currentColor" />
          </svg>
        </a>
        <a href="#" title="Linkedin" target="_blank">
          <svg class="h-5 text-slate-700" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M2.13332 1.06641C1.54422 1.06641 1.06665 1.54397 1.06665 2.13307V13.8664C1.06665 14.4555 1.54422 14.9331 2.13332 14.9331H13.8667C14.4558 14.9331 14.9333 14.4555 14.9333 13.8664V2.13307C14.9333 1.54397 14.4558 1.06641 13.8667 1.06641H2.13332ZM3.25332 6.39974H5.27998V12.7997H3.25332V6.39974ZM5.41332 4.27174C5.41332 4.90503 4.89994 5.41841 4.26665 5.41841C3.63337 5.41841 3.11998 4.90503 3.11998 4.27174C3.11998 3.63845 3.63337 3.12507 4.26665 3.12507C4.89994 3.12507 5.41332 3.63845 5.41332 4.27174ZM12.8 8.91401C12.8 6.98863 11.5556 6.24009 10.3194 6.24009C9.91467 6.22015 9.51167 6.30501 9.15064 6.48621C8.87649 6.62381 8.58948 6.93865 8.36816 7.48617H8.31123V6.40021H6.39998V12.8048H8.43322V9.39835C8.40382 9.04948 8.51547 8.59859 8.74389 8.33027C8.97231 8.06195 9.29907 7.99787 9.54681 7.96533H9.62407C10.2706 7.96533 10.7505 8.36562 10.7505 9.37433V12.8048H12.7837L12.8 8.91401Z" fill="currentColor" />
          </svg>
        </a>
        <a href="#" title="X" target="_blank">
          <svg class="h-5 text-slate-700" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.71553 5.00909C7.71553 3.16647 9.20886 1.67285 11.0506 1.67285C12.1318 1.67285 12.9952 2.18429 13.5737 2.92648C14.195 2.79936 14.7794 2.56945 15.308 2.2558C15.0996 2.90742 14.6585 3.45528 14.0835 3.80198C14.084 3.8031 14.0844 3.80423 14.085 3.80535C14.6489 3.73689 15.1854 3.58693 15.6851 3.36553L15.6839 3.36734C15.3244 3.90566 14.8726 4.38089 14.3531 4.76807C14.3811 4.95621 14.3953 5.1456 14.3953 5.33389C14.3953 9.26595 11.3997 13.8393 5.88925 13.8393C4.20162 13.8393 2.62975 13.3448 1.30667 12.4959C1.05876 12.3369 0.986733 12.007 1.1458 11.7591C1.15984 11.7371 1.17524 11.7166 1.19178 11.6974C1.28616 11.5413 1.46596 11.446 1.65904 11.4687C2.63532 11.5838 3.61134 11.4648 4.47162 11.089C3.61836 10.7127 2.95599 9.98344 2.66879 9.08743C2.61711 8.92622 2.65419 8.74969 2.76636 8.62288C2.77025 8.61848 2.77421 8.61417 2.77823 8.60995C2.09479 8.00845 1.66366 7.12726 1.66366 6.14524V6.10914C1.66366 5.93906 1.75367 5.78167 1.90027 5.69543C1.94844 5.66709 2.00035 5.64783 2.05363 5.63766C1.81914 5.18535 1.68652 4.67154 1.68652 4.12726C1.68652 3.62814 1.68938 2.99909 2.04083 2.43257C2.11961 2.30558 2.24804 2.22814 2.38544 2.20979C2.58756 2.14624 2.81688 2.20738 2.95895 2.3816C4.123 3.80905 5.80332 4.79526 7.71586 5.05529L7.71553 5.00909ZM5.88925 12.7726C5.04941 12.7726 4.24295 12.6328 3.4906 12.3755C4.40541 12.2171 5.28323 11.8567 6.03961 11.2639C6.19953 11.1386 6.26323 10.9261 6.19863 10.7335C6.13403 10.5409 5.95515 10.4098 5.752 10.4062C5.00228 10.3929 4.33821 10.0233 3.92308 9.45939C4.12612 9.44297 4.32452 9.40813 4.5167 9.35616C4.73172 9.29801 4.87849 9.09959 4.87114 8.87697C4.86379 8.65434 4.70426 8.46604 4.48587 8.42218C3.65535 8.25547 2.98537 7.64519 2.73242 6.84957C2.94667 6.90131 3.16904 6.93208 3.39709 6.93955C3.61129 6.94656 3.80417 6.81073 3.86976 6.6067C3.93534 6.40266 3.85772 6.17988 3.67956 6.06077C3.0562 5.64403 2.64652 4.93266 2.64652 4.12726C2.64652 3.94865 2.64904 3.78924 2.65974 3.64471C4.10784 5.11878 6.08926 6.06831 8.29422 6.17932C8.46102 6.18772 8.62212 6.1175 8.7295 5.98961C8.83689 5.8617 8.87816 5.69089 8.84103 5.52807C8.80267 5.35989 8.7822 5.18674 8.7822 5.00909C8.7822 3.75528 9.79825 2.73952 11.0506 2.73952C12.3672 2.73952 13.3286 3.95926 13.3286 5.33389C13.3286 8.80727 10.6882 12.7726 5.88925 12.7726Z" fill="currentColor" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</footer>
```

---

## Summary

Tailkits UI Free Components provides a comprehensive starting point for building modern SaaS landing pages and web applications without the overhead of complex component libraries or frameworks. The 30+ components cover essential UI patterns including navigation systems (navbars, headers), hero sections with multiple layouts, feature showcases, pricing tables, testimonials, CTAs, contact sections, blog layouts, team displays, stats, logo clouds, FAQs, newsletters, and footers. Each component is production-ready with responsive breakpoints, hover states, focus management, and proper ARIA labels for accessibility.

The library integrates seamlessly into any Tailwind CSS project through simple copy-paste workflows. Developers can quickly assemble complete landing pages by combining components, customize styling by modifying Tailwind utility classes, and maintain design consistency through the library's unified visual language of gradient text effects, consistent shadow utilities, rounded corners, and neutral color palettes. Components require no JavaScript for basic functionality, though interactive features like mobile menus, carousels, and toggles can be enhanced with minimal scripting. The zero-configuration approach makes it ideal for rapid prototyping, MVPs, and projects requiring fast time-to-market with professional aesthetics.