Tailwind Footers Components (295)

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Footers from Saturn

Tailwind CSS

Saturn

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 pb-28">
        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
          <div class="max-w-md mx-auto lg:mx-0">
            <h3 class="max-w-sm font-heading text-5xl md:text-6xl font-bold text-gray-900 mb-6">
              <span>Ready to get</span>
              <span class="font-serif italic">started</span>
              <span>?</span>
            </h3>
            <p class="max-w-sm text-gray-500 mb-16">If there are questions you want to ask, we will answer all your question</p>
            <div class="sm:flex mb-2 items-center">
              <input class="w-full mb-3 sm:mb-0 sm:mr-4 pb-4 bg-transparent border-b border-gray-200 text-sm text-gray-900 placeholder-gray-400 outline-none" type="email" placeholder="Enter your email">
              <button class="relative group inline-block flex-shrink-0 w-full sm:w-auto py-3 px-5 text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" type="submit">
                <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                <span class="relative">Subscribe</span>
              </button>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md mx-auto lg:mr-0">
            <p class="text-2xl font-semibold text-gray-900 mb-16">Maybe your question is have been answered, check this out.</p>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

CTA with email subscribe form, FAQ links, and footer

A combined call-to-action section with a heading, email subscription input and orange Subscribe button on the left, and a short FAQ link list on the right, followed by a footer row with social icons, legal links, and copyright text. The layout splits content into two columns above a divider.

AI Footers Component Generator

Footers from DarkPro

Tailwind CSS

DarkPro

<footer class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-8 lg:mb-16">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <a class="flex items-center text-white text-xl leading-none font-semibold" href="#">
          <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center mr-3">
            <span class="text-neutral-950 font-medium text-sm">D</span>
          </div>
          <span class="text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-300 to-gray-100">DarkPro</span>
        </a>
        <p class="mt-5 mb-6 max-w-xs text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center space-x-6">
          <a class="inline-block h-6 text-neutral-400 hover:text-white transition-colors duration-200" href="#">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"></path>
            </svg>
          </a>
          <a class="inline-block h-6 text-neutral-400 hover:text-white transition-colors duration-200" href="#">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
            </svg>
          </a>
          <a class="inline-block h-6 text-neutral-400 hover:text-white transition-colors duration-200" href="#">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Footer with Brand, Link Columns, and Social Icons

A dark-themed website footer with a brand logo and short tagline, social media icons on the left, four columns of text links (Company, Pages, Legal, Resources), a horizontal divider, and a centered copyright line below.

AI Footers Component Generator

Footers from Flaro

Tailwind CSS

Flaro

<section class="pt-24 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pb-20 border-b">
      <div class="flex flex-wrap -m-8">
        <div class="w-full sm:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 font-semibold leading-normal">Company</h3>
          <ul>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">About Us</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Careers</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Press</a></li>
            <li><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Blog</a></li>
          </ul>
        </div>
        <div class="w-full sm:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 font-semibold leading-normal">Pages</h3>
          <ul>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Login</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Register</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Add list</a></li>
            <li><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Contact</a></li>
          </ul>
        </div>
        <div class="w-full sm:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 font-semibold leading-normal">Legal</h3>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Light Footer with Link Columns, Email Subscribe Form, and Brand Bar

A light-themed website footer arranged as a horizontal row of link columns (Company, Pages, Legal, Resources) and a Subscribe column with an email input and purple button, followed by a divider with the Flaro logo, copyright text, and social icons.

AI Footers Component Generator

Footers from Gradia

Tailwind CSS

Gradia

<section class="relative py-24 overflow-hidden"><img class="absolute bottom-0 left-0" src="gradia-assets/elements/footers/radial.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 lg:w-5/12 p-6">
        <div class="flex flex-col justify-between h-full">
          <div><img class="mb-16" src="gradia-assets/logos/gradia-name-black.svg" alt=""></div>
          <div>
            <p class="mb-4 font-heading font-medium text-base" >The boldest SaaS kit in the market.</p>
            <p class="text-gray-600 text-sm" >© Copyright 2022. All Rights Reserved by Gradia.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-2/12 p-6">
        <div class="h-full">
          <h3 class="mb-9 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Company</h3>
          <ul>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Features</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Pricing</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Affiliate Program</a></li>
            <li><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Press Kit</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-2/12 p-6">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Gradia SaaS Footer with Company, Support, and Legal Links

A light-background website footer displaying the Gradia logo, a short tagline, copyright text, and three link columns labeled Company, Support, and Legals. The layout arranges the brand block on the left and link groups in a horizontal row on the right.

AI Footers Component Generator

Footers from Solstice

Tailwind CSS

Solstice

<div class="pt-24 pb-12 border-b border-gray-100">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between flex-wrap gap-8">
      <a href="#">
        <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <ul class="flex items-center gap-6 flex-wrap">
        <li class="text-gray-800 hover:text-opacity-70 transition duration-200"><a href="#">Platform</a></li>
        <li class="text-gray-800 hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
        <li class="text-gray-800 hover:text-opacity-70 transition duration-200"><a href="#">How it works</a></li>
        <li class="text-gray-800 hover:text-opacity-70 transition duration-200"><a href="#">Resources</a></li>
        <li class="text-gray-800 hover:text-opacity-70 transition duration-200"><a href="#">FAQs</a></li>
      </ul>
      <div class="flex items-center gap-6 flex-wrap">
        <a class="text-gray-400 hover:text-gray-600 transition duration-200" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28001 9.09 5.11001 7.38 3.00001 4.79C2.63001 5.42 2.42001 6.16 2.42001 6.94C2.42001 8.43 3.17001 9.75 4.33001 10.5C3.62001 10.5 2.96001 10.3 2.38001 10V10.03C2.38001 12.11 3.86001 13.85 5.82001 14.24C5.19074 14.4122 4.5301 14.4362 3.89001 14.31C4.16162 15.1625 4.69355 15.9084 5.41103 16.4429C6.1285 16.9775 6.99546 17.2737 7.89001 17.29C6.37364 18.4904 4.494 19.1393 2.56001 19.13C2.22001 19.13 1.88001 19.11 1.54001 19.07C3.44001 20.29 5.70001 21 8.12001 21C16 21 20.33 14.46 20.33 8.79C20.33 8.6 20.33 8.42 20.32 8.23C21.16 7.63 21.88 6.87 22.46 6Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="text-gray-400 hover:text-gray-600 transition duration-200" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z" fill="currentColor"></path>
          </svg>
        </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Solstice site footer with logo, navigation links, social icons, and copyright

A light-themed footer strip showing the Solstice logo on the left, horizontal navigation links (Platform, Features, How it works, Resources, FAQs) in the center, and grey Twitter, LinkedIn, and Instagram icons on the right, with a centered copyright line below a thin divider.

AI Footers Component Generator

Footers from Basko

Tailwind CSS

Basko

<section class="py-24 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-14 p-11 rounded-2xl" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">
      <div class="flex flex-wrap items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <h2 class="font-heading text-6xl text-white tracking-tighter">Grow your business fast with Basko Productivity Tool.</h2>
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="flex flex-wrap md:justify-end">
            <div class="auto"><a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-gray-700 hover:bg-gray-800 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap justify-between -m-8">
      <div class="w-auto p-8">
        <h3 class="mb-7 text-white font-semibold tracking-tight">Company</h3>
        <ul>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">About</a></li>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Features</a></li>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Works</a></li>
          <li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Career</a></li>
        </ul>
      </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Footer with Gradient CTA Banner and Link Columns

A dark-themed page footer that opens with a gradient promotional banner containing a serif heading and a dark call-to-action button for a free trial. Below the banner, four columns of text links are organized under the headings Company, Help, Resources, and Links.

AI Footers Component Generator

Footers from Zanrly

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative px-10 pt-10 pb-6 bg-gray-100 overflow-hidden border border-gray-100 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-gray w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-white.png" alt="">
      </div>
      <div class="relative">
        <div class="flex flex-wrap items-center justify-between mb-10 -m-4">
          <div class="w-full md:w-1/2 p-4">
            <a class="inline-block" href="#">
              <img src="zanrly-assets/logos/zanrly-logo.svg" alt="">
            </a>
          </div>
          <div class="w-full md:w-1/2 p-4">
            <div class="md:max-w-md ml-auto">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-full md:flex-1 p-1.5">
                  <input class="px-4 py-2.5 w-full text-sm text-gray-500 font-bold bg-white outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-500 border border-gray-200 rounded-full" id="footerLightPattern1-1" type="text" placeholder="Email address">
                </div>
                <div class="w-full md:w-auto p-1.5">
                  <div class="flex flex-wrap justify-center -m-2">
                    <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Get Started</a></div>
                  </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Zanrly Footer with Email Signup and Link Columns

A light gray footer section with the Zanrly logo and an email signup input with a blue Get Started button at the top, followed by a white card containing four link columns (Product, For Developers, Resources, Legal) and a copyright line with logo at the bottom.

AI Footers Component Generator

Footers from Nightsable

Tailwind CSS

Nightsable

<section class="bg-gray-50 overflow-hidden">
  <div class="py-14 bg-black rounded-b-7xl"></div>
  <div class="py-24">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap justify-center -m-8 mb-28">
        <div class="w-full md:w-1/2 lg:w-4/12 p-8">
          <div class="md:max-w-xs">
            <img class="mb-7" src="nightsable-assets/logos/logo-dark.svg" alt="">
            <p class="text-gray-400 font-medium">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 text-lg text-black font-medium">About</h3>
          <ul>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Contact</a></li>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Blog</a></li>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Our Story</a></li>
            <li><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Careers</a></li>
          </ul>
        </div>
        <div class="w-full md:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 text-lg text-black font-medium">Company</h3>
          <ul>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Contact</a></li>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Branded Site Footer with Link Columns and Social Follow Cards

A light-background website footer for the Nightsable branding agency, showing a logo and tagline, About and Company link columns, three white pill-shaped social follow cards for Twitter, Instagram, and TikTok, and a copyright line with Terms of Use and Privacy Policy links at the bottom. The black rounded shape at the top is a separate section above the footer.

AI Footers Component Generator

Footers from Zeus

Tailwind CSS

Zeus

<section class="py-12 lg:py-20">
  <div class="container mx-auto px-4 mb-12 md:mb-20">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <a class="inline-block mb-5 text-gray-900 text-lg font-semibold" href="#">
          <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
        </a>
        <p class="mb-6 max-w-sm text-base text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div>
          <a class="inline-block w-10 mr-4" href="#">
            <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63469 17.7274V9.76612H9.35806L9.76664 6.66255H6.63469V4.68138C6.63469 3.78311 6.88796 3.17095 8.20273 3.17095L9.87687 3.17027V0.394337C9.58735 0.357434 8.59354 0.272827 7.43684 0.272827C5.02146 0.272827 3.36785 1.71891 3.36785 4.37401V6.66255H0.63623V9.76612H3.36785V17.7274H6.63469Z" fill="#838EA4"></path>
            </svg>
          </a>
          <a class="inline-block w-10 mr-4" href="#">
            <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14598C18.1356 2.44844 17.4032 2.65356 16.6336 2.74513C17.4194 2.27462 18.0208 1.52831 18.3059 0.641769C17.5689 1.0775 16.7553 1.39389 15.8885 1.56541C15.1943 0.82489 14.2069 0.363647 13.1118 0.363647C11.0108 0.363647 9.30722 2.06719 9.30722 4.16707C9.30722 4.46489 9.34083 4.75577 9.40573 5.03392C6.24434 4.87513 3.44104 3.3605 1.56483 1.05895C1.23686 1.61986 1.05028 2.27344 1.05028 2.9711C1.05028 4.29107 1.72243 5.45574 2.74225 6.13713C2.11877 6.11629 1.53237 5.94477 1.01901 5.65968V5.70719C1.01901 7.5498 2.33086 9.08762 4.07031 9.43762C3.75161 9.52338 3.41555 9.57089 3.06789 9.57089C2.82222 9.57089 2.58464 9.54656 2.3517 9.5002C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1623 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4279 6.10416 15.4279C13.1026 15.4279 16.928 9.63117 16.928 4.60398L16.9153 4.11147C17.6627 3.57835 18.3094 2.90853 18.8181 2.14598Z" fill="#838EA4"></path>
            </svg>
          </a>
          <a class="inline-block w-10 mr-4" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.4 15.8H5.9V15.3V7.2V6.7H5.4H2.7H2.2V7.2V15.3V15.8H2.7H5.4ZM15.3 15.8H15.8V15.3V10.17C15.8 8.18386 14.1361 6.52 12.15 6.52C11.6417 6.52 11.1085 6.68661 10.6472 6.94292C10.5635 6.98941 10.4809 7.03957 10.4 7.09321V6.7H9.9H7.2H6.7V7.2V15.3V15.8H7.2H9.9H10.4V15.3V10.53C10.4 10.0862 10.8062 9.68 11.25 9.68C11.6938 9.68 12.1 10.0862 12.1 10.53V15.3V15.8H12.6H15.3ZM1.8 0.5H16.2C16.9139 0.5 17.5 1.08614 17.5 1.8V16.2C17.5 16.9139 16.9139 17.5 16.2 17.5H1.8C1.08614 17.5 0.5 16.9139 0.5 16.2V1.8C0.5 1.08614 1.08614 0.5 1.8 0.5ZM1.93 4.05C1.93 5.22614 2.87386 6.17 4.05 6.17C5.22614 6.17 6.17 5.22614 6.17 4.05C6.17 2.87386 5.22614 1.93 4.05 1.93C2.87386 1.93 1.93 2.87386 1.93 4.05Z" fill="#838EA4" stroke="#838EA4"></path>
            </svg>
          </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Multi-column site footer with brand, link groups, and social icons

A light-background website footer with a Zeus logo and short tagline, social icons on the left, and four link columns (Company, Pages, Legal, Resources). A divider and copyright line sit below the links.

AI Footers Component Generator

Footers from Zospace

Tailwind CSS

Zospace

<section class="py-20 2xl:py-40 bg-gray-800">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 pb-24 mb-16 border-b border-gray-400">
      <div class="w-full lg:w-2/5 px-4 mb-16 lg:mb-0">
        <span class="text-lg text-blue-400 font-bold">We're Zospace</span>
        <h2 class="max-w-sm mt-8 mb-12 text-5xl text-white font-bold font-heading">Thank you for your time</h2>
        <p class="mb-16 text-gray-300">The brown fox jumps over the lazy dog.</p>
        <div><a class="inline-block mb-4 sm:mb-0 sm:mr-4 py-4 px-12 text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Active demo</a><a class="inline-block px-12 py-4 text-white font-bold border border-gray-200 hover:border-white rounded-full" href="#">Contact</a></div>
      </div>
      <div class="w-full lg:w-3/5 px-4">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-16 lg:mb-0">
            <ul class="text-lg">
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Hello</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Story</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Pricing</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Applications</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Stats</a></li>
              <li><a class="text-gray-200 hover:text-gray-100" href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-16 lg:mb-0">
            <ul class="text-lg">
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Newsletter</a></li>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Website Footer with Link Columns and Social Icons

A dark-themed page footer with a brand heading, short text, two call-to-action buttons, three columns of navigation links, a horizontal divider, a copyright line, and circular social media icons. The layout is a multi-column arrangement with a bottom row for legal and social content.

AI Footers Component Generator

Footers from Wrexa

Tailwind CSS

Wrexa

<section class="py-24 md:py-40 bg-gray-900 relative">
  <div class="absolute top-0 left-0 w-full h-6">
    <div class="mx-8 h-6 bg-white"></div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-28">
      <div class="w-full xl:w-2/3 px-4 mb-8 xl:mb-0">
        <h3 class="font-heading text-2xl sm:text-3xl text-white mb-4">Have any question?</h3>
        <h2 class="font-heading text-4xl sm:text-5xl md:text-6xl text-white">Follow us and our story</h2>
      </div>
      <div class="w-full xl:w-auto px-4 xl:ml-auto"><a class="inline-block px-7 py-4 text-center font-medium border border-gray-500 hover:border-gray-400 text-white rounded" href="#">Get Started</a></div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-1/2 lg:w-1/3 xl:w-1/5 px-4 mb-8">
        <h4 class="text-white mb-5">About</h4>
        <ul>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Story</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Creative Team</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Founders</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Why Us</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Our Mission</a></li>
          <li><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Idea</a></li>
        </ul>
      </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark multi-column site footer with CTA and link columns

A dark footer section with a 'Have any question?' heading, a Get Started outlined button, five link columns (About, Product, Follow, Application, Support), a legal links row, and a copyright line with a purple logo badge. Its layout is a horizontal set of link columns beneath a promotional header.

AI Footers Component Generator

Footers from Flex

Tailwind CSS

Flex

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="pt-24 pb-11 mx-auto max-w-4xl">
        <a class="block md:mx-auto mb-5 max-w-max" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
        </a>
        <div class="flex flex-wrap justify-center -mx-3 lg:-mx-6">
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Product</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Features</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Pricing</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Resources</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Careers</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Help</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Privacy</a></div>
        </div>
      </div>
    </div>
    <div class="border-b border-coolGray-100"></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Centered Footer with Logo, Link Row, and Copyright

A light gray footer section with a curved top edge, centered Flex logo, a horizontal row of navigation links (Product, Features, Pricing, Resources, Careers, Help, Privacy), a divider line, and a centered copyright notice. Layout is a centered vertical stack with no visible interactive states.

AI Footers Component Generator

Footers from Uinel

Tailwind CSS

Uinel

<section class="py-24 2xl:py-44 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-14 lg:mb-24">
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10 lg:mb-0">
        <h3 class="mb-10 font-heading font-medium tracking-tighter text-xl">About Uinel</h3>
        <ul>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">About us</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Stories</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Our people</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Founders</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Why Uinel</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">How we compare</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Website</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Idea</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Mission</a></li>
          <li><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Newsroom</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10 lg:mb-0">
        <h3 class="mb-10 font-heading font-medium tracking-tighter text-xl">Product &amp; Tools</h3>
        <ul>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Download Uinel</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Sign up free</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Pricing</a></li>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Uinel Website Footer with Link Columns and Logo

A light-background website footer organized into five labeled link columns (About Uinel, Product & Tools, Community, Support, More) with a bottom row containing the Uinel logo, navigation links, copyright text, and a back-to-top circular button. Its layout is a multi-column link grid over a horizontal bottom bar.

AI Footers Component Generator

Footers from Yofte

Tailwind CSS

Yofte

<section class="bg-gray-100">
  <div class="flex flex-wrap">
    <div class="w-full md:w-5/12 lg:w-3/12 py-20 px-6 bg-white">
      <div class="max-w-xs mx-auto">
        <a class="inline-block mb-12 text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <div class="mb-12 font-semibold font-heading">
          <p>Our Store</p>
          <p>Nørremark 51, 8700 Horsens</p>
          <p>Denmark</p>
        </div>
        <div class="flex mb-16 md:mb-40">
          <a class="inline-flex items-center justify-center w-12 h-12 mr-2 bg-blue-500 rounded-full" href="#">
            <img src="yofte-assets/buttons/facebook-circle.svg" alt="">
          </a>
          <a class="inline-flex items-center justify-center w-12 h-12 mr-2 bg-indigo-300 rounded-full" href="#">
            <img src="yofte-assets/buttons/instagram-circle.svg" alt="">
          </a>
          <a class="inline-flex items-center justify-center w-12 h-12 bg-blue-300 rounded-full" href="#">
            <img src="yofte-assets/buttons/twitter-circle.svg" alt="">
          </a>
        </div>
        <div class="flex flex-wrap">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

E-commerce site footer with brand sidebar, link columns, and contact details

A two-part website footer with a left panel showing the Yofte logo, store address, social icons, and payment method badges, and a right panel with category pills, three link columns (Information, Customer Service, Contact Us), and a copyright line. The layout places navigation links in a multi-column grid beside a sidebar.

AI Footers Component Generator

Footers from Shopal

Tailwind CSS

Shopal

<section class="py-12 lg:py-20">
  <div class="container mx-auto px-4 mb-12 md:mb-20">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
          <a class="inline-block mb-16" href="#">
            <img class="h-7" src="shopal-assets/logos/shopal-logo.svg" alt="" width="auto">
          </a>
          <div class="flex flex-col mb-8"><a class="inline-block text-sm font-bold hover:underline mb-3" href="#">Call us at: 1-888-699-8900</a><a class="inline-block text-sm font-bold hover:underline" href="mailto:contact@shopal.com">Email: contact@shopal.com</a></div>
          <div>
            <a class="inline-block text-green-500 hover:text-indigo-500 mr-6" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="currentColor"></path>
                <mask id="mask0_601_10113" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="inline-block text-green-500 hover:text-indigo-500 mr-6" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="currentColor"></path>
                <mask id="mask0_601_10114" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="white"></path>
                </mask>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Shopal E-commerce Site Footer with Link Columns and Payment Logos

A white-background website footer with the Shopal logo, contact details, social icons, four labeled link columns (Information, Policy, Our shop, Customer service), a horizontal divider, a copyright line, and payment method logos on the right. Accent elements use lime green.

AI Footers Component Generator

Footers from Nigodo

Tailwind CSS

Nigodo

<section>
  <div class="pt-26 border-3 border-l-0 border-r-0 border-indigo-900">
    <div class="pb-16 border-b-3 border-indigo-900">
      <div class="container px-4 mx-auto text-center">
        <a class="inline-block mx-auto mb-20" href="#">
          <img class="h-12" src="nigodo-assets/logo-nigodo.svg" alt="">
        </a>
        <div class="flex flex-wrap -mx-4 -mb-6 justify-center">
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Product</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Features</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Pricing</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Resources</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Careers</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Help</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Privacy</a></div>
        </div>
      </div>
    </div>
    <div class="container px-4 pt-16 pb-24 mx-auto">
      <p class="text-center text-xl md:text-2xl font-extrabold">© 2022 Nigodo. All rights reserved.</p>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Nigodo centered footer with logo, link row, and copyright

A light footer section with a centered Nigodo logo, a horizontal row of navigation links (Product, Features, Pricing, Resources, Careers, Help, Privacy), and a copyright line below a divider. It provides bottom-of-page site navigation and company information.

AI Footers Component Generator

Footers from Atis

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap mb-6 lg:mb-20">
        <div class="mb-6 w-full lg:w-1/5">
          <a class="text-3xl font-bold leading-none" href="#">
            <img class="h-12" src="atis-assets/logo/atis/atis-mono-black.svg" alt="" width="auto">
          </a>
        </div>
        <div class="mb-5 w-full lg:w-1/5">
          <p class="text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo.</p>
        </div>
        <div class="w-full lg:w-3/5 flex flex-wrap -mx-3 justify-end">
          <div class="mb-6 w-full md:w-1/2 lg:w-1/4 lg:mr-6 px-3">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Atis Footer with Brand, Office Address, Contacts and Social Icons

A light-background website footer showing the Atis logo with a short lorem ipsum tagline, office address and email contact columns, a copyright line, and Facebook, Twitter, and Instagram icons in green. Content is arranged in a horizontal row above a bottom copyright and social bar.

AI Footers Component Generator

Footers from Pstls.

Tailwind CSS

Pstls.

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-10 justify-between">
      <div class="w-full md:w-1/5 px-4 mb-6 md:mb-0"><a class="inline-block" href="#"  ><img src="pstls-assets/logos/pstls-logo.svg" alt="" width="87"></a></div>
      
      <div class="w-full md:w-3/5 px-4 mb-6 md:mb-0">
        <ul class="md:flex items-center justify-center">
          <li class="mb-6 md:mb-0 md:mr-12"><a class="inline-block font-bold text-sm hover:text-gray-900" href="#" >Hello</a></li>
          <li class="mb-6 md:mb-0 md:mr-12"><a class="inline-block font-bold text-sm hover:text-gray-900" href="#" >Story</a></li>
          <li class="mb-6 md:mb-0 md:mr-12"><a class="inline-block font-bold text-sm hover:text-gray-900" href="#" >About us</a></li>
          <li><a class="inline-block font-bold text-sm hover:text-gray-900" href="#" >Services</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/5 px-4">
        <div class="flex md:justify-end"><a class="inline-block mr-4" href="#"><img src="pstls-assets/logos/twitter.svg" alt=""></a><a class="inline-block mr-4" href="#"><img src="pstls-assets/logos/google.svg" alt=""></a><a class="inline-block" href="#"><img src="pstls-assets/logos/facebook.svg" alt=""></a></div>
      </div>
    </div>
    
    <p class="text-sm text-gray-500 text-center" >© Pstls. 2022 All right reserved. </p>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Light footer with logo, navigation links, social icons, and copyright

A minimal light-background website footer showing a Pstls. logo on the left, four horizontal text links in the center, purple social media icons on the right, and a centered copyright line below. A thin blue rule runs along the bottom edge.

AI Footers Component Generator

Footers from BoldUI

Tailwind CSS

BoldUI

<section class="bg-black overflow-x-hidden">
  <div class="border-t">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap -mx-4 mb-10 md:mb-0">
        <div class="w-full md:w-2/6 md:border-r md:border-gray-800 px-4">
          <div class="max-w-xs mx-auto py-20">
            <a class="inline-block text-xl text-white font-medium font-heading mb-8 md:mb-32" href="#">
              <img class="h-8" src="boldui-assets/logo/logo-boldui-light.svg" alt="" width="auto">
            </a>
            <p class="max-w-xs text-white uppercase font-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="w-full md:w-4/6 px-4">
          <div class="md:py-20 px-8 lg:pl-20 lg:pr-10">
            <div class="flex flex-wrap -mx-4">
              <div class="w-1/2 md:w-1/4 px-4 mb-12 md:mb-0">
                <h3 class="mb-8 text-sm text-white uppercase font-heading">Company</h3>
                <ul>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Careers</a></li>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Press</a></li>
                  <li><a class="text-gray-500 hover:text-gray-400" href="#">Blog</a></li>
                </ul>
              </div>
              <div class="w-1/2 md:w-1/4 px-4 mb-12 md:mb-0">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Multi-Column Website Footer with Logo, Link Groups, and Social Icons

A black website footer with a BoldUI logo and tagline on the left, four link columns (Company, Pages, Legal, Resources) in the center-right, and a bottom bar with a copyright line and social media icons.

AI Footers Component Generator

Footers from Acros

Tailwind CSS

Acros

<section class="py-24 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 pb-20">
      <div class="w-full lg:w-2/6 px-4 mb-16 lg:mb-0">
        <div>
          <h4 class="font-heading text-lg text-white mb-6">Company</h4>
          <div class="flex items-center mb-2">
            <div class="flex items-center justify-center w-10 h-10 mr-3 border border-gray-500 rounded-full">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.993636 2.24838C1.20452 1.89921 2.36641 0.629197 3.19556 0.667537C3.44341 0.688076 3.66251 0.838013 3.84053 1.01191C4.24928 1.41106 5.41939 2.9207 5.48581 3.23837C5.64739 4.01749 4.71897 4.46662 5.00311 5.25191C5.7275 7.02445 6.97566 8.27255 8.74898 8.99622C9.53362 9.28034 9.98277 8.35197 10.7619 8.51423C11.0789 8.58064 12.5893 9.75069 12.9885 10.1594C13.1617 10.3367 13.3124 10.5565 13.3329 10.8044C13.3637 11.6773 12.0149 12.8555 11.752 13.0062C11.1317 13.4498 10.3224 13.4423 9.33575 12.9836C6.58266 11.8382 2.18292 7.5215 1.01623 4.66448C0.56982 3.68339 0.53901 2.86866 0.993636 2.24838Z" fill="#00CBA6"></path>
              </svg>
            </div>
            <span class="font-heading text-white">+44 20 6024 2068</span>
          </div>
          <div class="flex items-center mb-8">
            <div class="flex items-center justify-center w-10 h-10 mr-3 border border-gray-500 rounded-full">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.59183 2.33337H10.8771C11.7834 2.34354 12.6459 2.72666 13.2639 3.39351C13.8819 4.06036 14.2014 4.95273 14.1479 5.86279V10.2147C14.2014 11.1248 13.8819 12.0171 13.2639 12.684C12.6459 13.3508 11.7834 13.734 10.8771 13.7441H4.59183C2.64523 13.7441 1.33325 12.1605 1.33325 10.2147V5.86279C1.33325 3.91701 2.64523 2.33337 4.59183 2.33337Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.5118 6.04077L8.66819 8.33029C8.13004 8.7522 7.37566 8.7522 6.83752 8.33029L3.96948 6.04077" stroke="#1F2E3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <span class="font-heading text-white">office@neonic.co</span>
          </div>
          <div class="flex items-center">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark multi-column website footer with contact info, social icons, and link columns

A dark footer section with a company contact block, social media icon buttons, four link columns (Pages, Products, Resources, Legal), and a copyright row with a 'Go to up' link. The layout is a horizontal row of text columns beneath a divider line.

AI Footers Component Generator

Footer is the place where you will put the site navigation and all the relevant information. That is why it is worth putting some effort into its design, prioritizing vital information and links over the less important ones.

Choose from many variants of Tailwind components footers. The variants shown here are available in various UI libraries in the Shuffle Editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Tailwind website template. Each library is designed by a professional designer and coded by our team of developers.

Get access to all Tailwind components footers section, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Footers Components

Framework

UI Library

Components

Footers from Saturn

Get the code for 13,400+ components

CTA with email subscribe form, FAQ links, and footer

Get Started CTA with Email Signup and FAQ Links

Footers from DarkPro

Get the code for 13,400+ components

Dark Footer with Brand, Link Columns, and Social Icons

Dark Footer with Logo, Navigation Links, Copyright, and Social Icons

Footers from Flaro

Get the code for 13,400+ components

Light Footer with Link Columns, Email Subscribe Form, and Brand Bar

Dark Website Footer with Logo, Link Columns, Social Icons, and Copyright

Footers from Gradia

Get the code for 13,400+ components

Gradia SaaS Footer with Company, Support, and Legal Links

Dark Site Footer with Logo, Links, Email, and Copyright

Footers from Solstice

Get the code for 13,400+ components

Solstice site footer with logo, navigation links, social icons, and copyright

Solstice Light Footer with Link Columns and Social Links

Footers from Basko

Get the code for 13,400+ components

Dark Footer with Gradient CTA Banner and Link Columns

Dark Footer with Brand Logo, Copyright, Links, and Social Icons

Footers from Zanrly

Get the code for 13,400+ components

Zanrly Footer with Email Signup and Link Columns

Zanrly Footer with Email Signup and Link Columns

Footers from Nightsable

Get the code for 13,400+ components

Branded Site Footer with Link Columns and Social Follow Cards

Dark Agency Website Footer with Link Columns and Social Follow Buttons

Footers from Zeus

Get the code for 13,400+ components

Multi-column site footer with brand, link groups, and social icons

Multi-column site footer with brand logo, link groups, and social icons

Footers from Zospace

Get the code for 13,400+ components

Dark Website Footer with Link Columns and Social Icons

Dark Footer with Link Columns, Newsletter Signup, and Social Icons

Footers from Wrexa

Get the code for 13,400+ components

Dark multi-column site footer with CTA and link columns

Light footer with CTA heading, link columns, legal links, and copyright

Footers from Flex

Get the code for 13,400+ components

Centered Footer with Logo, Link Row, and Copyright

Centered Footer with Flex Logo and Links

Footers from Uinel

Get the code for 13,400+ components

Uinel Website Footer with Link Columns and Logo

Ecommerce footer with newsletter signup, link columns, social icons, and payment badges

Footers from Yofte

Get the code for 13,400+ components

E-commerce site footer with brand sidebar, link columns, and contact details

Dark Multi-Column Site Footer with Newsletter Signup

Footers from Shopal

Get the code for 13,400+ components

Shopal E-commerce Site Footer with Link Columns and Payment Logos

Shopal dark e-commerce website footer with link columns and payment logos

Footers from Nigodo

Get the code for 13,400+ components