COMPONENTS · SECTIONS

Tailwind Footer Components & Sections

Finish pages with polished Tailwind footers; sitemap links, socials and newsletter sign-up baked in, with dark-mode styling out-of-the-box.

12 sections2 freeTailwind CSS v4HTML · React · MCP

Pick sections Tailkits UI

FREE FOOTER SECTIONS · COPY AND PASTE

All free sections

Footer: Minimal Grey with Links

Minimal grey footer with logo, three link columns, copyright and icons

Free

Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-footer-1.json

View HTML code

<footer data-tk-hover="links" 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
      data-tk-motion="reveal fade"
      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="Saaslandings" />
      </figure>
      <div class="flex flex-col items-start gap-y-4">
        <h2 class="text-sm font-bold text-card-foreground">Product</h2>
        <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-muted-foreground"
              href="/"
              title="Home"
              >Home</a
            >
            <div
              class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-tk-surface-4 text-tk-ink px-2 py-0.5"
            >
              we&#39;re hiring
            </div>
          </div>
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/features"
            title="Features"
            >Features</a
          >
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/blog"
            title="Blog"
            >Blog</a
          >
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/services"
            title="Services"
            >Services</a
          >
        </div>
      </div>
      <div class="flex flex-col items-start gap-y-4">
        <h2 class="text-sm font-bold text-card-foreground">Offers</h2>
        <div class="flex flex-col items-start gap-y-1.5">
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/overview"
            title="Overview"
            >Overview</a
          >
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/financial-modeling"
            title="Financial modeling"
            >Financial modeling</a
          >
          <div class="flex flex-wrap items-center gap-1">
            <a
              class="whitespace-nowrap text-sm font-medium text-muted-foreground"
              href="/expense-tracking"
              title="Expense tracking"
              >Expense tracking</a
            >
            <div
              class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-tk-surface-4 text-tk-ink px-2 py-0.5"
            >
              soon
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col items-start gap-y-4">
        <h2 class="text-sm font-bold text-card-foreground">Services</h2>
        <div class="flex flex-col items-start gap-y-1.5">
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/design-process"
            title="Design process"
            >Design process</a
          >
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/business-process"
            title="Business process"
            >Business process</a
          >
          <div class="flex flex-wrap items-center gap-1">
            <a
              class="whitespace-nowrap text-sm font-medium text-muted-foreground"
              href="/rewards"
              title="Rewards"
              >Rewards</a
            >
            <div
              class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-tk-surface-4 text-tk-ink px-2 py-0.5"
            >
              beta
            </div>
          </div>
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/pricing"
            title="Pricing"
            >Pricing</a
          >
        </div>
      </div>
    </div>
    <div class="border-b border-b-border"></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-card-foreground">
          <time>2025</time>
          - Saas Landings. All rights reserved.
        </div>
      </div>
      <div class="flex flex-wrap items-center gap-4">
        <a
          href="https://www.instagram.com/"
          title="Instagram"
          target="_blank"
          aria-label="Instagram"
        >
          <svg
            class="h-5 text-tk-ink"
            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="https://www.linkedin.com/"
          title="Linkedin"
          target="_blank"
          aria-label="Linkedin"
        >
          <svg
            class="h-5 text-tk-ink"
            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="https://x.com/" title="X" target="_blank" aria-label="X">
          <svg
            class="h-5 text-tk-ink"
            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>
        <a
          href="/community"
          title="Smiling Face"
          target="_blank"
          aria-label="Smiling Face"
        >
          <svg
            class="h-5 text-tk-ink"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g clip-path="url(#clip0_1502_25447)">
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M7.99991 0.935547C4.09837 0.935547 0.935547 4.09837 0.935547 7.9999C0.935547 11.9014 4.09837 15.0643 7.99991 15.0643C11.9014 15.0643 15.0642 11.9014 15.0642 7.9999C15.0642 4.09837 11.9014 0.935547 7.99991 0.935547ZM1.94889 7.9999C1.94889 4.65802 4.65802 1.94888 7.99991 1.94888C11.3418 1.94888 14.0509 4.65802 14.0509 7.9999C14.0509 11.3417 11.3418 14.051 7.99991 14.051C4.65802 14.051 1.94889 11.3417 1.94889 7.9999ZM5.3733 9.82841C5.20479 9.58682 4.87234 9.52759 4.63075 9.6961C4.38916 9.86461 4.32993 10.1971 4.49844 10.4386C5.26854 11.5427 6.54969 12.2669 8.00004 12.2669C9.45039 12.2669 10.7315 11.5427 11.5017 10.4386C11.6702 10.1971 11.6109 9.86461 11.3693 9.6961C11.1278 9.52759 10.7953 9.58682 10.6268 9.82841C10.0476 10.6587 9.08701 11.2002 8.00004 11.2002C6.91307 11.2002 5.95247 10.6587 5.3733 9.82841ZM5.73337 7.30684C6.24883 7.30684 6.6667 6.88889 6.6667 6.37351C6.6667 5.85812 6.24883 5.44017 5.73337 5.44017C5.21791 5.44017 4.80003 5.85812 4.80003 6.37351C4.80003 6.88889 5.21791 7.30684 5.73337 7.30684ZM11.2 6.37351C11.2 6.88889 10.7822 7.30684 10.2667 7.30684C9.75124 7.30684 9.33337 6.88889 9.33337 6.37351C9.33337 5.85812 9.75124 5.44017 10.2667 5.44017C10.7822 5.44017 11.2 5.85812 11.2 6.37351Z"
                fill="currentColor"
              />
            </g>
            <defs>
              <clipPath id="clip0_1502_25447">
                <rect width="16" height="16" fill="white" />
              </clipPath>
            </defs>
          </svg>
        </a>
      </div>
    </div>
  </div>
</footer>

Footer: Centered Logo Bar

Minimal bar footer with centered logo, copyright left and icons right

Free

Full-width previewnpx shadcn@latest add https://tailkits.com/r/free-footer-2.json

View HTML code

<footer data-tk-hover="links" class="bg-muted py-16 lg:py-24">
  <div class="max-w-7xl mx-auto px-4 xl:px-0 flex flex-col gap-y-12">
    <div
      data-tk-motion="reveal fade"
      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="Saaslandings" />
      </figure>
      <div class="flex flex-col items-start gap-y-4">
        <h2 class="text-sm font-bold text-card-foreground">Product</h2>
        <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-muted-foreground"
              href="/"
              title="Home"
              >Home</a
            >
            <div
              class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-tk-surface-4 text-tk-ink px-2 py-0.5"
            >
              we&#39;re hiring
            </div>
          </div>
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/features"
            title="Features"
            >Features</a
          >
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/blog"
            title="Blog"
            >Blog</a
          >
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/services"
            title="Services"
            >Services</a
          >
        </div>
      </div>
      <div class="flex flex-col items-start gap-y-4">
        <h2 class="text-sm font-bold text-card-foreground">Offers</h2>
        <div class="flex flex-col items-start gap-y-1.5">
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/overview"
            title="Overview"
            >Overview</a
          >
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/financial-modeling"
            title="Financial modeling"
            >Financial modeling</a
          >
          <div class="flex flex-wrap items-center gap-1">
            <a
              class="whitespace-nowrap text-sm font-medium text-muted-foreground"
              href="/expense-tracking"
              title="Expense tracking"
              >Expense tracking</a
            >
            <div
              class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-tk-surface-4 text-tk-ink px-2 py-0.5"
            >
              soon
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col items-start gap-y-4">
        <h2 class="text-sm font-bold text-card-foreground">Services</h2>
        <div class="flex flex-col items-start gap-y-1.5">
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/design-process"
            title="Design process"
            >Design process</a
          >
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/business-process"
            title="Business process"
            >Business process</a
          >
          <div class="flex flex-wrap items-center gap-1">
            <a
              class="whitespace-nowrap text-sm font-medium text-muted-foreground"
              href="/rewards"
              title="Rewards"
              >Rewards</a
            >
            <div
              class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-tk-surface-4 text-tk-ink px-2 py-0.5"
            >
              beta
            </div>
          </div>
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground"
            href="/pricing"
            title="Pricing"
            >Pricing</a
          >
        </div>
      </div>
    </div>
    <div class="border-b border-b-border"></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-card-foreground">
          <time>2025</time>
          - Saas Landings. All rights reserved.
        </div>
      </div>
      <div class="flex flex-wrap items-center gap-6">
        <div class="flex items-center gap-x-6">
          <a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground transition hover:text-card-foreground"
            href="mailto:[email protected]"
            title="Contact"
          >
            Contact </a
          ><a
            class="whitespace-nowrap text-sm font-medium text-muted-foreground transition hover:text-card-foreground"
            href="/privacy-policy"
            title="Privacy Policy"
          >
            Privacy Policy
          </a>
        </div>
        <div class="flex items-center gap-x-4">
          <div class="mr-2 h-4 w-[1px] bg-tk-fill"></div>
          <div class="flex flex-wrap items-center gap-4">
            <a
              href="https://www.instagram.com/"
              title="Instagram"
              target="_blank"
              aria-label="Instagram"
            >
              <svg
                class="h-5 text-tk-ink"
                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="https://www.linkedin.com/"
              title="Linkedin"
              target="_blank"
              aria-label="Linkedin"
            >
              <svg
                class="h-5 text-tk-ink"
                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="https://x.com/" title="X" target="_blank" aria-label="X">
              <svg
                class="h-5 text-tk-ink"
                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>
            <a
              href="/community"
              title="Smiling Face"
              target="_blank"
              aria-label="Smiling Face"
            >
              <svg
                class="h-5 text-tk-ink"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g clip-path="url(#clip0_1502_25447)">
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M7.99991 0.935547C4.09837 0.935547 0.935547 4.09837 0.935547 7.9999C0.935547 11.9014 4.09837 15.0643 7.99991 15.0643C11.9014 15.0643 15.0642 11.9014 15.0642 7.9999C15.0642 4.09837 11.9014 0.935547 7.99991 0.935547ZM1.94889 7.9999C1.94889 4.65802 4.65802 1.94888 7.99991 1.94888C11.3418 1.94888 14.0509 4.65802 14.0509 7.9999C14.0509 11.3417 11.3418 14.051 7.99991 14.051C4.65802 14.051 1.94889 11.3417 1.94889 7.9999ZM5.3733 9.82841C5.20479 9.58682 4.87234 9.52759 4.63075 9.6961C4.38916 9.86461 4.32993 10.1971 4.49844 10.4386C5.26854 11.5427 6.54969 12.2669 8.00004 12.2669C9.45039 12.2669 10.7315 11.5427 11.5017 10.4386C11.6702 10.1971 11.6109 9.86461 11.3693 9.6961C11.1278 9.52759 10.7953 9.58682 10.6268 9.82841C10.0476 10.6587 9.08701 11.2002 8.00004 11.2002C6.91307 11.2002 5.95247 10.6587 5.3733 9.82841ZM5.73337 7.30684C6.24883 7.30684 6.6667 6.88889 6.6667 6.37351C6.6667 5.85812 6.24883 5.44017 5.73337 5.44017C5.21791 5.44017 4.80003 5.85812 4.80003 6.37351C4.80003 6.88889 5.21791 7.30684 5.73337 7.30684ZM11.2 6.37351C11.2 6.88889 10.7822 7.30684 10.2667 7.30684C9.75124 7.30684 9.33337 6.88889 9.33337 6.37351C9.33337 5.85812 9.75124 5.44017 10.2667 5.44017C10.7822 5.44017 11.2 5.85812 11.2 6.37351Z"
                    fill="currentColor"
                  />
                </g>
                <defs>
                  <clipPath id="clip0_1502_25447">
                    <rect width="16" height="16" fill="white" />
                  </clipPath>
                </defs>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>

10 MORE FOOTER SECTIONS IN TAILKITS UI

See plans

FOOTER SECTIONS FROM OTHER LIBRARIES

All component libraries

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

Flowrift

Free

80+ ready-made Tailwind CSS components

SmoothUI

Free

Free animated React components and blocks for shadcn/ui and Tailwind CSS 4

Tailark

Freemium

Free and Pro shadcn/ui marketing blocks and pages

Mantine UI

Free

120+ responsive UI blocks for React.

Magic UI Pro

Paid

50+ animated sections and 3+ templates

Htmlwind

Paid

225+ responsive Tailwind CSS components

BuouUI

Paid

Retro Tailwind components ready to copy‑paste

GOOD TO KNOW

Frequently asked questions

Answers to common questions about Tailwind footer components.

Are these Tailwind footer sections free?

2 of the 12 footer sections on this page are free (Minimal Grey with Links, Centered Logo Bar): copy the HTML above, no account needed. The other 10 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 footer 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 footer 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 footer 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 footer sections and insert the code into your project. A Tailkits UI token unlocks the Pro section code.

Which other libraries have Tailwind footer components?

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

Tailwind Footer Components & Sections

FREE FOOTER SECTIONS · COPY AND PASTE

Footer: Minimal Grey with Links

Footer: Centered Logo Bar

10 MORE FOOTER SECTIONS IN TAILKITS UI

Footer 1

Footer 2

Footer 3

Footer 5

Footer 6

Footer 7

Footer 9

Footer 10

Footer 11

Footer 12

FOOTER SECTIONS FROM OTHER LIBRARIES

Flowrift

SmoothUI

Tailark

Mantine UI

Untitled UI

Tailwind Plus

Magic UI Pro

Htmlwind

BuouUI

MORE TAILWIND SECTIONS

Frequently asked questions

Are these Tailwind footer sections free?

Which Tailwind CSS version do the footer components use?

Can I use these footer sections in React or Next.js?

Can an AI coding assistant add a footer section for me?

Which other libraries have Tailwind footer components?