Tailwind Footers Components (295)

Framework

UI Library

Components

Footers from Bendis

Tailwind CSS

Bendis

<section class="py-24 bg-blue-800">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-5 mb-12 md:mb-20">
      <div class="w-full lg:w-1/3 px-5 mb-12 lg:mb-0">
        <a class="inline-block mb-6 text-white text-lg font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
        </a>
        <p class="mb-6 max-w-sm text-base text-blue-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div>
          <a class="inline-flex items-center w-12 h-12 mr-4 bg-blue-900" href="#">
            <svg class="mx-auto text-yellow-500 h-4 w-4" viewBox="0 0 10 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63482 17.7272V9.766H9.35818L9.76676 6.66243H6.63482V4.68126C6.63482 3.78299 6.88809 3.17083 8.20285 3.17083L9.877 3.17015V0.394215C9.58748 0.357312 8.59366 0.272705 7.43696 0.272705C5.02158 0.272705 3.36797 1.71878 3.36797 4.37389V6.66243H0.636353V9.766H3.36797V17.7272H6.63482Z"></path>
            </svg>
          </a>
          <a class="inline-flex items-center w-12 h-12 mr-4 bg-blue-900" href="#">
            <svg class="mx-auto text-yellow-500 h-4 w-4" viewBox="0 0 19 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8182 2.14598C18.1356 2.44844 17.4032 2.65356 16.6337 2.74513C17.4194 2.27462 18.0209 1.52831 18.3059 0.641769C17.5689 1.0775 16.7553 1.39389 15.8885 1.56541C15.1943 0.82489 14.207 0.363647 13.1118 0.363647C11.0108 0.363647 9.30725 2.06719 9.30725 4.16707C9.30725 4.46489 9.34086 4.75577 9.40577 5.03392C6.24437 4.87513 3.44107 3.3605 1.56486 1.05895C1.23689 1.61986 1.05031 2.27344 1.05031 2.9711C1.05031 4.29107 1.72246 5.45574 2.74228 6.13713C2.1188 6.11628 1.5324 5.94477 1.01904 5.65968V5.70719C1.01904 7.5498 2.33089 9.08762 4.07034 9.43762C3.75164 9.52337 3.41558 9.57089 3.06792 9.57089C2.82225 9.57089 2.58468 9.54656 2.35174 9.50019C2.83613 11.0125 4.24071 12.1123 5.90486 12.1424C4.60343 13.1623 2.96246 13.7683 1.18013 13.7683C0.873039 13.7683 0.570554 13.7498 0.272736 13.7162C1.95658 14.7974 3.95564 15.4279 6.10419 15.4279C13.1026 15.4279 16.9281 9.63116 16.9281 4.60398L16.9153 4.11147C17.6628 3.57834 18.3094 2.90853 18.8182 2.14598Z"></path>
            </svg>
          </a>
          <a class="inline-flex items-center w-12 h-12 mr-4 bg-blue-900" href="#">
            <svg class="mx-auto text-yellow-500 h-4 w-4" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 0C4.0275 0 0 4.13211 0 9.22838C0 13.3065 2.5785 16.7648 6.15375 17.9841C6.60375 18.0709 6.76875 17.7853 6.76875 17.5403C6.76875 17.3212 6.76125 16.7405 6.7575 15.9712C4.254 16.5277 3.726 14.7332 3.726 14.7332C3.3165 13.6681 2.72475 13.3832 2.72475 13.3832C1.9095 12.8111 2.78775 12.8229 2.78775 12.8229C3.6915 12.887 4.16625 13.7737 4.16625 13.7737C4.96875 15.1847 6.273 14.777 6.7875 14.5414C6.8685 13.9443 7.10025 13.5381 7.3575 13.3073C5.35875 13.0764 3.258 12.2829 3.258 8.74709C3.258 7.73988 3.60675 6.91659 4.18425 6.27095C4.083 6.03774 3.77925 5.0994 4.263 3.82846C4.263 3.82846 5.01675 3.58116 6.738 4.77462C7.458 4.56958 8.223 4.46785 8.988 4.46315C9.753 4.46785 10.518 4.56958 11.238 4.77462C12.948 3.58116 13.7017 3.82846 13.7017 3.82846C14.1855 5.0994 13.8818 6.03774 13.7917 6.27095C14.3655 6.91659 14.7142 7.73988 14.7142 8.74709C14.7142 12.2923 12.6105 13.0725 10.608 13.2995C10.923 13.5765 11.2155 14.1423 11.2155 15.0071C11.2155 16.242 11.2043 17.2344 11.2043 17.5341C11.2043 17.7759 11.3617 18.0647 11.823 17.9723C15.4237 16.7609 18 13.3002 18 9.22838C18 4.13211 13.9703 0 9 0Z"></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

Blue Multi-Column Site Footer with Logo, Social Icons, and Link Columns

A full-width dark blue website footer containing a brand logo with tagline, social media icon buttons, four labeled link columns (Company, Pages, Legal, Resources), and a divider with a copyright line below. The layout is a horizontal row of columns with the brand block on the left.

Footers from Metis

Tailwind CSS

Metis

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap mb-12 lg:mb-20 -mx-3 text-center lg:text-left">
      <div class="w-full lg:w-1/5 px-3 mb-6 lg:mb-0">
        <a class="inline-block mx-auto lg:mx-0 text-3xl font-semibold leading-none" href="#">
          <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
        </a>
      </div>
      <div class="w-full lg:w-2/5 px-3 mb-8 lg:mb-0">
        <p class="max-w-md mx-auto lg:max-w-full lg:mx-0 lg:pr-32 lg:text-lg text-blueGray-400 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo.</p>
      </div>
      <div class="w-full lg:w-1/5 px-3 mb-8 lg:mb-0">
        <p class="mb-2 lg:mb-4 lg:text-lg font-bold font-heading text-blueGray-800">Office</p>
        <p class="lg:text-lg text-blueGray-400">359 Hidden Valley Road, NY</p>
      </div>
      <div class="w-full lg:w-1/5 px-3">
        <p class="mb-2 lg:mb-4 lg:text-lg font-bold font-heading text-blueGray-800">Contacts</p>
        <p class="lg:text-lg text-blueGray-400">hello@gmail.com</p>
      </div>
    </div>
    <div class="flex flex-col lg:flex-row items-center lg:justify-between">
      <p class="text-xs text-blueGray-400">© 2020. All rights reserved.</p>
      <div class="order-first lg:order-last -mx-2 mb-4 lg:mb-0">
        <a class="inline-block px-2" href="#">

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, Office and Contact Info, and Social Icons

A light-themed website footer displaying a brand logo with placeholder text, office address and email contact columns, a copyright line, and Facebook, Twitter, and Instagram icons. The content is arranged in a horizontal row with a bottom row for copyright and social links.

Footers from Shuffle UX

Tailwind CSS

Shuffle UX

<footer class="py-20">
  <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="text-gray-600 text-2xl leading-none" href="#">
          <img class="h-8" src="mockup-assets/logos/shuffle-ux.svg" alt="" width="auto">
        </a>
        <p class="mt-5 mb-6 max-w-xs text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div>
          <a class="inline-block h-6 mr-8" href="#">
            <img class="mx-auto" src="mockup-assets/socials/facebook.svg">
          </a>
          <a class="inline-block h-6 mr-8" href="#">
            <img class="mx-auto" src="mockup-assets/socials/github.svg">
          </a>
          <a class="inline-block h-6 mr-8" href="#">
            <img class="mx-auto" src="mockup-assets/socials/instagram.svg">
          </a>
          <a class="inline-block h-6 mr-8" href="#">
            <img class="mx-auto" src="mockup-assets/socials/linkedin.svg">
          </a>
          <a class="inline-block h-6" href="#">
            <img class="mx-auto" src="mockup-assets/socials/twitter.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 logo, social icons, and link groups

A light-background website footer showing a brand logo and short tagline with social media icons on the left, and four link columns (Company, Pages, Legal, Resources) on the right. A thin divider separates the links from a centered copyright line at the bottom.

Footers from Cronos

Tailwind CSS

Cronos

<section class="py-20 bg-black">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4 pb-20 mb-6 border-b border-gray-800">
            <div class="w-full lg:w-1/4 p-4">
                <a class="inline-block" href="#">
                    <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                </a>
            </div>
            <div class="w-full lg:w-3/4 p-4">
                <div class="flex flex-wrap -m-4">
                    <div class="w-full md:w-1/2 lg:w-1/4 p-4">
                        <p class="text-white font-bold mb-6">Product</p>
                        <ul>
                            <li class="mb-3"><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">Careers</a></li>
                            <li class="mb-3"><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">About Us</a></li>
                            <li class="mb-3"><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">Insights</a></li>
                            <li class="mb-3"><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">PCI Compliance</a></li>
                            <li class="mb-3"><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">Interfratlons</a></li>
                            <li><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">Pricing</a></li>
                        </ul>
                    </div>
                    <div class="w-full md:w-1/2 lg:w-1/4 p-4">
                        <p class="text-white font-bold mb-6">For Developers</p>
                        <ul>

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 Site Footer with Link Columns and Email Subscribe

A dark-themed website footer with a Cronos logo, three columns of text links (Product, For Developers, Resources), an email subscription field with an arrow button, and a bottom bar containing legal links, copyright text, and social icons.

Footers from NEUB

Tailwind CSS

NEUB

<footer class="py-20 bg-white">
    <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 href="#">
                    <img src="neub-assets/logos/neub-logo.png" alt="" class="h-5">
                </a>
                <p class="mt-5 mb-6 max-w-xs text-gray-400 leading-loose font-medium">Bold
                    design system for tech startups that demand attention and push boundaries.</p>
                <div>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/facebook.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/github.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/instagram.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/linkedin.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/twitter.svg">

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

NEUB Site Footer with Link Columns and Social Icons

A light-background website footer showing the NEUB brand, a short tagline, five outlined social media icon buttons, four link columns (Company, Pages, Legal, Resources) with colored underline accents, and a pink copyright line centered at the bottom.

Footers from Casper

Tailwind CSS

Casper

<section class="relative py-12 sm:pt-24 bg-body overflow-hidden">
  <div class="absolute top-0 right-0 -mt-40 -mr-52 w-186 h-186 bg-gradient-to-t from-violet-700 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
  <img class="absolute top-0 right-0 w-40 md:w-52 xl:w-auto mt-16 xl:mt-24 lg:mr-24" src="casper-assets/footer/robot.png" alt="">
  <div class="relative container mx-auto px-4">
    <div class="max-w-4xl xl:max-w-6xl mb-20">
      <img class="block mb-20" src="casper-assets/footer/logo-c-only.svg" alt="">
      <h3 class="font-heading text-4xl xs:text-5xl sm:text-6xl font-medium text-white tracking-tight mb-20">Gain valuable insights into your users' preferences</h3>
      <div class="-mb-6">
        <div class="inline-flex mb-6 mr-12 items-center">
          <div class="flex justify-center items-center w-12 h-12 rounded-full bg-yellow-600">
            <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 10.5C21 17.5 12 23.5 12 23.5C12 23.5 3 17.5 3 10.5C3 8.11305 3.94821 5.82387 5.63604 4.13604C7.32387 2.44821 9.61305 1.5 12 1.5C14.3869 1.5 16.6761 2.44821 18.364 4.13604C20.0518 5.82387 21 8.11305 21 10.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 13.5C13.6569 13.5 15 12.1569 15 10.5C15 8.84315 13.6569 7.5 12 7.5C10.3431 7.5 9 8.84315 9 10.5C9 12.1569 10.3431 13.5 12 13.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div class="ml-3">
            <span class="block text-white tracking-tight">1929, Bancangan, Sambit,</span>
            <span class="block text-white tracking-tight">Wakanda Kidul</span>
          </div>
        </div>
        <div class="inline-flex mb-6 items-center">
          <div class="flex justify-center items-center w-12 h-12 rounded-full bg-sky-600">
            <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7 9.5L11.38 12.99C11.5565 13.1295 11.775 13.2054 12 13.2054C12.225 13.2054 12.4435 13.1295 12.62 12.99L17 9.5M20 19.5H4C3.73478 19.5 3.48043 19.3946 3.29289 19.2071C3.10536 19.0196 3 18.7652 3 18.5V6.5C3 6.23478 3.10536 5.98043 3.29289 5.79289C3.48043 5.60536 3.73478 5.5 4 5.5H20C20.2652 5.5 20.5196 5.60536 20.7071 5.79289C20.8946 5.98043 21 6.23478 21 6.5V18.5C21 18.7652 20.8946 19.0196 20.7071 19.2071C20.5196 19.3946 20.2652 19.5 20 19.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

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 Logo, Contact Details, and Legal Links

A dark full-width footer section featuring a large headline about user preference insights, a 3D robot illustration, contact address and email with colored icon circles, and a divider above copyright and Terms & Conditions and Privacy Policy links.

Footers from Mirga

Tailwind CSS

Mirga

<section class="overflow-hidden">
  <div class="bg-neutral-900">
    <div class="py-3 px-4 md:px-14 border-b border-neutral-600">
      <div class="container mx-auto px-4"></div>
      <div class="flex justify-between flex-wrap gap-4">
        <div class="flex items-center gap-6 sm:gap-18 flex-wrap"><a class="inline-block text-white font-medium hover:text-opacity-80 tracking-tight transition duration-200" href="#">Help Center</a><a class="inline-block text-white font-medium hover:text-opacity-80 tracking-tight transition duration-200" href="#">Location</a></div>
        <div class="flex items-center gap-6 sm:gap-18 flex-wrap">
          <a class="inline-block text-white font-medium hover:text-opacity-80 tracking-tight transition duration-200" href="#">Contact</a>
          <div class="flex items-center gap-6 flex-wrap">
            <a class="inline-block text-white font-medium hover:text-opacity-80 tracking-tight transition duration-200" href="#">Back to top</a>
            <a class="relative text-white hover:text-opacity-80 border border-neutral-50 rounded-full transition duration-200" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="19.5" transform="rotate(90 20 20)" fill="currentColor" stroke="#E5E5E7"></circle></svg>
              <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path d="M6.41225 12.1235L9.60066 8.93506L12.7891 12.1235" stroke="#19191B" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-12 pb-20 md:pb-40">
      <div class="container mx-auto px-4">

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 Newsletter Signup and Link Columns

A dark-themed page footer with a top utility bar (Help Center, Location, Contact, Back to top), a newsletter email signup with a green submit button, four link columns (Product, Resources, Company, Solutions), and a light bottom bar with the Mirga logo and copyright text.

Footers from Flow

Tailwind CSS

Flow

<section class="relative py-12 lg:py-24 overflow-hidden">
        <img class="absolute bottom-0 left-0" src="flow-assets/footer/waves-lines-left-bottom.png" alt="">
        <div class="container px-4 mx-auto relative">
            <div class="flex flex-wrap mb-12 md:mb-24 xl:mb-40 -mx-4">
                <div class="w-full lg:w-2/12 xl:w-3/12 px-4 mb-16 lg:mb-0">
                    <a class="inline-block mb-4" href="#">
                        <img class="h-8" src="flow-assets/logos/flow-logo.svg" alt="">
                    </a>
                </div>
                <div class="w-full md:w-7/12 lg:w-7/12 xl:w-6/12 px-4 mb-16 lg:mb-0">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-1/2 xs:w-1/3 px-4 mb-8 xs:mb-0">
                            <h3 class="mb-6 font-bold">Platform</h3>
                            <ul>
                                <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Solutions</a></li>
                                <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">How it works</a></li>
                                <li><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Pricing</a></li>
                            </ul>
                        </div>
                        <div class="w-1/2 xs:w-1/3 px-4 mb-8 xs:mb-0">
                            <h3 class="mb-6 font-bold">Resources</h3>
                            <ul>
                            <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Blog</a></li>
                            <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Help Center</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

Flow Website Footer with Link Columns and Social Links

A light-background website footer showing the Flow logo, three link columns (Platform, Resources, Company), and social media follow links for Facebook, Instagram, and LinkedIn with a copyright line at the bottom. Faint decorative diagonal line art occupies the lower left.

Footers from Vista

Tailwind CSS

Vista

<section class="relative bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 pt-24 pb-8" style="height:750px">
    <div class="container mx-auto px-4">
        <div class="flex items-center flex-wrap justify-between gap-8">
            <ul class="flex flex-wrap gap-6">
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">Features</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">How it works</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">Pricing</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">About</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">Blog</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">FAQs</a>
                </li>
                <li>
                    <a href="#" class="text-white hover:text-opacity-70 transition duration-200">Contact</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

Vista Site Footer with Social Links and Gradient Wordmark

A full-width dark-to-pink gradient footer with a horizontal row of text navigation links and social media icons at the top, and a large faded Vista wordmark across the middle. A small copyright line sits at the bottom center.

Footers from Cyber

Tailwind CSS

Cyber

<footer class="py-20 relative">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto relative z-10">
    <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="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
          <img src="cyber-assets/logo.png" alt="" class="h-4">
        </a>
        <p class="mt-5 mb-6 max-w-xs text-gray-400 leading-loose">Interface with next-gen protocols. Execute quantum algorithms. Breach the limitations of conventional systems.</p>
        <div>
          <a class="inline-block h-6 mr-8 text-blue-400 hover:text-purple-500 transition-all duration-300 transform hover:scale-110" href="#">
            <img class="mx-auto" src="cyber-assets/socials/facebook.svg">
          </a>
          <a class="inline-block h-6 mr-8 text-green-400 hover:text-blue-400 transition-all duration-300 transform hover:scale-110" href="#">
            <img class="mx-auto" src="cyber-assets/socials/github.svg">
          </a>
          <a class="inline-block h-6 mr-8 text-purple-500 hover:text-green-400 transition-all duration-300 transform hover:scale-110" href="#">

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 Cyberpunk Footer with Multi-Column Links and Social Icons

A dark website footer with a glitch-style logo, tagline, social media icons, four colored link columns (Company, Pages, Legal, Resources), a divider, and a copyright line. The footer uses monospaced type and neon cyan, purple, and green column headings.

Footers from FilyTreck

Tailwind CSS

FilyTreck

<section class="pt-24 bg-black">
    <div class="container mx-auto px-4">
        <img class="mb-16 h-9" src="fily-assets/logos/fily-treck-white-logo.svg" alt="">
        <div class="flex flex-wrap items-center -m-10 pb-20">
            <div class="w-full md:w-1/2 xl:w-1/3 p-10">
                <div class="h-full p-px bg-gradient-white overflow-hidden rounded-3xl">
                    <div class="relative h-full">
                        <div class="absolute top-0 left-0 w-full h-full bg-black rounded-3xl"></div>
                        <div class="relative h-full py-12 px-10">
                            <h2 class="mb-4 font-heading text-3xl font-bold text-white">Subscribe to our newsletter</h2>
                            <p class="mb-10 text-lg text-gray-500 font-medium leading-relaxed">Duis pellentesque urna a erat sollicitudin, et molestie leo semper</p>
                            <div class="relative p-1.5 bg-transparent border border-gray-500 focus-within:ring focus-within:ring-blue-200 rounded-2xl md:rounded-full transiiton duration-200">
                                <div class="relative">
                                    <input id="footers-input-01-1" type="text" class="py-3 px-6 sm:pr-14 w-full text-gray-500 placeholder-gray-500 font-semibold text-center md:text-left bg-transparent outline-none" placeholder="Your email address">
                                    <a href="#" class="md:absolute md:top-0 md:right-0 inline-flex justify-center items-center w-full md:w-12 h-12 md:h-full text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-2xl md:rounded-full transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </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

Dark Footer with Newsletter Signup and Link Columns

A dark website footer featuring a brand logo, a bordered newsletter subscription card with an email input and arrow submit button, three link columns (Product, Use Cases, Resources), and a bottom bar with copyright text and legal links.

Footers from Vendia

Tailwind CSS

Vendia

<section class="pt-12 md:pt-20 pb-8 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 pb-20 border-b border-blueGray-800">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-xs sm:max-w-md">
          <a class="inline-block mb-20" href="#">
            <img class="block h-7" src="vendia-assets/logos/vendia.svg" alt="">
          </a>
          <p class="sm:text-xl text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum aliquet accumsan porta lectus ridiculus in mattis.</p>
        </div>
      </div>
      <div class="w-full sm:w-1/3 lg:w-2/12 px-4 mb-12 sm:mb-0">
        <div>
          <span class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 mb-6">Company</span>
          <ul class="list-unstyled mb-0">
            <li class="mb-4"><a class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">About</a></li>
            <li class="mb-4"><a class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Support</a></li>
            <li class="mb-4"><a class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Products</a></li>
            <li><a class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Career</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full sm:w-1/3 lg:w-2/12 px-4 mb-12 sm:mb-0">
        <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 Site Footer with Logo, Link Columns, and Payment Icons

A dark-themed website footer showing the Vendia logo, a short lorem ipsum blurb, three link columns (Company, Help, Resources), a divider, copyright text, and payment method badges. Lime-accented column headings organize navigation links into a multi-column layout.

Footers from Aurora

Tailwind CSS

Aurora

<section class="py-12 md:pt-24 bg-teal-900">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-32">
      <div class="w-full lg:w-1/3 px-4 mb-16">
        <div>
          <img class="block h-8 mb-4" src="aurora-assets/logos/logo-aurora-sm-white.svg" alt="">
          <span class="block text-gray-400 mb-16">Make collecting fun again.</span>
          <div class="flex items-center">
            <a class="inline-flex w-12 h-12 mr-3 text-white items-center justify-center bg-teal-800 hover:bg-teal-700 rounded-lg transition duration-200" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <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.28004 9.09 5.11004 7.38 3.00004 4.79C2.63004 5.42 2.42004 6.16 2.42004 6.94C2.42004 8.43 3.17004 9.75 4.33004 10.5C3.62004 10.5 2.96004 10.3 2.38004 10V10.03C2.38004 12.11 3.86004 13.85 5.82004 14.24C5.19077 14.4122 4.53013 14.4362 3.89004 14.31C4.16165 15.1625 4.69358 15.9084 5.41106 16.4429C6.12854 16.9775 6.99549 17.2737 7.89004 17.29C6.37367 18.4904 4.49404 19.1393 2.56004 19.13C2.22004 19.13 1.88004 19.11 1.54004 19.07C3.44004 20.29 5.70004 21 8.12004 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="inline-flex w-12 h-12 mr-3 text-white items-center justify-center bg-teal-800 hover:bg-teal-700 rounded-lg transition duration-200" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <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>
            <a class="inline-flex w-12 h-12 mr-3 text-white items-center justify-center bg-teal-800 hover:bg-teal-700 rounded-lg transition duration-200" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.8 2H16.2C19.4 2 22 4.6 22 7.8V16.2C22 17.7383 21.3889 19.2135 20.3012 20.3012C19.2135 21.3889 17.7383 22 16.2 22H7.8C4.6 22 2 19.4 2 16.2V7.8C2 6.26174 2.61107 4.78649 3.69878 3.69878C4.78649 2.61107 6.26174 2 7.8 2ZM7.6 4C6.64522 4 5.72955 4.37928 5.05442 5.05442C4.37928 5.72955 4 6.64522 4 7.6V16.4C4 18.39 5.61 20 7.6 20H16.4C17.3548 20 18.2705 19.6207 18.9456 18.9456C19.6207 18.2705 20 17.3548 20 16.4V7.6C20 5.61 18.39 4 16.4 4H7.6ZM17.25 5.5C17.5815 5.5 17.8995 5.6317 18.1339 5.86612C18.3683 6.10054 18.5 6.41848 18.5 6.75C18.5 7.08152 18.3683 7.39946 18.1339 7.63388C17.8995 7.8683 17.5815 8 17.25 8C16.9185 8 16.6005 7.8683 16.3661 7.63388C16.1317 7.39946 16 7.08152 16 6.75C16 6.41848 16.1317 6.10054 16.3661 5.86612C16.6005 5.6317 16.9185 5.5 17.25 5.5ZM12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7ZM12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-flex w-12 h-12 text-white items-center justify-center bg-teal-800 hover:bg-teal-700 rounded-lg transition duration-200" href="#">

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 Green Site Footer with Brand, Link Columns, and Social Icons

A dark green website footer with the Aurora logo and tagline, social media icon buttons, four link columns (Product, Company, Resources, Legal), a Hiring badge next to Careers, and a copyright line at the bottom-right.

Footers from Shopky

Tailwind CSS

Shopky

<section class="py-16">
    <div class="container mx-auto px-4">
        <div class="pb-10 border-b border-gray-50 mb-10">
            <div class="flex justify-center mb-12">
                <a href="#" class="inline-block">
                    <img class="h-12" src="shopky-assets/logos/shopky-logo2.svg" alt="">
                </a>
            </div>
            <ul class="flex flex-wrap justify-center gap-6">
                <li>
                    <a href="#" class="text-gray-500 hover:text-gray-900 transition duration-200">Home</a>
                </li>
                <li>
                    <span class="text-gray-500">•</span>
                </li>
                <li>
                    <a href="#" class="text-gray-500 hover:text-gray-900 transition duration-200">Products</a>
                </li>
                <li>
                    <span class="text-gray-500">•</span>
                </li>
                <li>
                    <a href="#" class="text-gray-500 hover:text-gray-900 transition duration-200">Categories</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

Shopky Website Footer with Logo, Links, Copyright, and Payment Icons

A centered website footer for the Shopky brand, showing the logo, a horizontal row of navigation links separated by bullet dots, a divider line, a copyright notice, and a row of payment method logos (Visa, Mastercard, PayPal, American Express).

Footers from asitrastudio

Tailwind CSS

asitrastudio

<section class="py-12 md:py-20 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-32">
      <div class="w-full xl:w-3/12 px-4 mb-12 xl:mb-0">
        <a class="inline-block" href="#">
          <img src="asitrastudio-assets/logos/logo-asitra-white.svg" alt="">
        </a>
      </div>
      <div class="w-full sm:w-1/2 xl:w-2/12 px-4 mb-10 xl:mb-0">
        <h5 class="text-lg text-white mb-4">About</h5>
        <ul>
          <li class="mb-2"><a class="inline-block text-lg text-coolGray-500 hover:text-coolGray-400" href="#">Contact</a></li>
          <li class="mb-2"><a class="inline-block text-lg text-coolGray-500 hover:text-coolGray-400" href="#">Blog</a></li>
          <li class="mb-2"><a class="inline-block text-lg text-coolGray-500 hover:text-coolGray-400" href="#">Our Storry</a></li>
          <li>
            <a class="inline-block text-lg text-coolGray-500 hover:text-coolGray-400" href="#">
              <span class="mr-2">Careers</span>
              <span class="inline-block px-2 py-1 text-xs bg-blue-500 text-white uppercase rounded-full">Hiring</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 xl:w-3/12 px-4 mb-10 xl:mb-0">
        <h5 class="text-lg text-white mb-4">Company</h5>

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 Site Footer with Link Columns and Newsletter Signup

A full-width dark footer showing a logo, About and Company link columns with a blue HIRING badge, a newsletter heading with email input and Subscribe button, and a bottom row with copyright, social links (Twitter, Instagram, LinkedIn), and legal links.

Footers from Coleos

Tailwind CSS

Coleos

<section class="relative bg-white overflow-hidden">
  <div class="container mx-auto py-16 px-4">
    <div class="flex flex-wrap justify-between gap-8 pb-16">
      <div>
        <img class="block mb-11" src="coleos-assets/logos/logo-coleos-2.svg" alt="">
        <ul class="text-rhino-400 text-sm mb-11">
          <li class="mb-3">Call us at: 1-888-699-8900</li>
          <li>Email: contact@shuffleux.com</li>
        </ul>
        <div class="flex flex-wrap gap-4">
          <a class="w-12 h-12 rounded-full border border-rhino-200 flex items-center justify-center hover:bg-orange-500 hover:text-white text-orange-500 transition duration-200 hover:border-transparent" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6348 20.7273V12.766H16.3582L16.7668 9.66246H13.6348V7.68129C13.6348 6.78302 13.8881 6.17086 15.2029 6.17086L16.877 6.17018V3.39425C16.5875 3.35734 15.5937 3.27274 14.437 3.27274C12.0216 3.27274 10.368 4.71881 10.368 7.37392V9.66246H7.63635V12.766H10.368V20.7273H13.6348Z" fill="currentColor"></path>
              <mask id="mask0_1301_2689" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6348 20.7273V12.766H16.3582L16.7668 9.66246H13.6348V7.68129C13.6348 6.78302 13.8881 6.17086 15.2029 6.17086L16.877 6.17018V3.39425C16.5875 3.35734 15.5937 3.27274 14.437 3.27274C12.0216 3.27274 10.368 4.71881 10.368 7.37392V9.66246H7.63635V12.766H10.368V20.7273H13.6348Z" fill="white"></path>
              </mask>
              <g mask="url(#mask0_1301_2689)"></g>
            </svg>
          </a>
          <a class="w-12 h-12 rounded-full border border-rhino-200 flex items-center justify-center hover:bg-orange-500 hover:text-white text-orange-500 transition duration-200 hover:border-transparent" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8182 6.14598C21.1356 6.44844 20.4032 6.65356 19.6337 6.74513C20.4194 6.27462 21.0209 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.207 4.36365 16.1118 4.36365C14.0108 4.36365 12.3073 6.06719 12.3073 8.16707C12.3073 8.46489 12.3409 8.75577 12.4058 9.03392C9.24437 8.87513 6.44107 7.3605 4.56486 5.05895C4.23689 5.61986 4.05031 6.27344 4.05031 6.9711C4.05031 8.29107 4.72246 9.45574 5.74228 10.1371C5.1188 10.1163 4.5324 9.94477 4.01904 9.65968V9.70719C4.01904 11.5498 5.33089 13.0876 7.07034 13.4376C6.75164 13.5234 6.41558 13.5709 6.06792 13.5709C5.82225 13.5709 5.58468 13.5466 5.35174 13.5002C5.83613 15.0125 7.24071 16.1123 8.90486 16.1424C7.60343 17.1623 5.96246 17.7683 4.18013 17.7683C3.87304 17.7683 3.57055 17.7498 3.27274 17.7162C4.95658 18.7974 6.95564 19.4279 9.10419 19.4279C16.1026 19.4279 19.9281 13.6312 19.9281 8.60398L19.9153 8.11147C20.6628 7.57834 21.3094 6.90853 21.8182 6.14598Z" fill="currentColor"></path>
              <mask id="mask0_1301_2692" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8182 6.14598C21.1356 6.44844 20.4032 6.65356 19.6337 6.74513C20.4194 6.27462 21.0209 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.207 4.36365 16.1118 4.36365C14.0108 4.36365 12.3073 6.06719 12.3073 8.16707C12.3073 8.46489 12.3409 8.75577 12.4058 9.03392C9.24437 8.87513 6.44107 7.3605 4.56486 5.05895C4.23689 5.61986 4.05031 6.27344 4.05031 6.9711C4.05031 8.29107 4.72246 9.45574 5.74228 10.1371C5.1188 10.1163 4.5324 9.94477 4.01904 9.65968V9.70719C4.01904 11.5498 5.33089 13.0876 7.07034 13.4376C6.75164 13.5234 6.41558 13.5709 6.06792 13.5709C5.82225 13.5709 5.58468 13.5466 5.35174 13.5002C5.83613 15.0125 7.24071 16.1123 8.90486 16.1424C7.60343 17.1623 5.96246 17.7683 4.18013 17.7683C3.87304 17.7683 3.57055 17.7498 3.27274 17.7162C4.95658 18.7974 6.95564 19.4279 9.10419 19.4279C16.1026 19.4279 19.9281 13.6312 19.9281 8.60398L19.9153 8.11147C20.6628 7.57834 21.3094 6.90853 21.8182 6.14598Z" fill="white"></path>

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 multi-column site footer with brand, link columns, social icons, and payment logos

A light-background website footer for the Coleos brand, showing contact details and social icons on the left, four link columns (Information, Policy, Our Shop, Customer Service), and a copyright line with Visa, Mastercard, and PayPal payment logos at the bottom.

Footers from Consulty

Tailwind CSS

Consulty

<div class="pt-32 pb-48 lg:pb-32 relative">
    <img class="absolute bottom-0 left-0" src="consulty-assets/footer/shapes1.svg" alt="">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/6 p-4">
                <img class="h-8" src="consulty-assets/logos/consulty-logo2.svg" alt="">
            </div>
            <div class="w-full lg:w-7/12 p-4">
                <div class="flex flex-wrap lg:justify-center gap-12">
                    <div>
                        <p class="tracking-tight font-medium mb-6">Platform</p>
                        <ul class="flex flex-col gap-6">
                            <li>
                                <a href="#" class="tracking-tight text-gray-700 hover:text-orange-400 transition duration-200">Services</a>
                            </li>
                            <li>
                                <a href="#" class="tracking-tight text-gray-700 hover:text-orange-400 transition duration-200">Book A Call</a>
                            </li>
                            <li>
                                <a href="#" class="tracking-tight text-gray-700 hover:text-orange-400 transition duration-200">Pricing</a>
                            </li>
                            <li>
                                <a href="#" class="tracking-tight text-gray-700 hover:text-orange-400 transition duration-200">Products</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

Light website footer with logo, link columns, and company description

A light-background website footer with the Consulty logo, three link columns (Platform, Company, Resources), a 'We Are Hiring' badge beside Careers, and a short company blurb with copyright text. Decorative orange shapes appear in the lower-left corner.

Footers from Suncealand

Tailwind CSS

Suncealand

<section class="pb-8 pt-14 bg-gray-900 overflow-hidden">
  <div class="px-4 md:px-16 mx-auto">
    <div class="flex flex-wrap justify-between items-center mb-16">
      <div class="w-full lg:w-auto mb-14 lg:mb-0">
        <div class="flex flex-wrap">
          <div class="w-full lg:w-auto">
            <a class="inline-block" href="#">
              <img src="suncealand-assets/logos/suncealand-white.svg" alt="">
            </a>
          </div>
          <div class="w-full lg:w-auto lg:ml-8">
            <span class="text-gray-300">Stay connected</span>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-auto">
        <a class="inline-block py-7 px-6 md:pl-8 md:pr-18 bg-gray-700 hover:bg-gray-600 rounded-3xl" href="#">
          <div class="flex flex-wrap md:flex-nowrap items-center">
            <div class="flex-shrink-0 w-full md:w-auto mb-2 md:mb-0 md:mr-7">
              <div class="relative w-11 h-11">
                <img src="suncealand-assets/images/avatar-girl-banner.png" alt="">
                <img class="w-5 h-5 animate-bounce absolute bottom-0 right-0 -mr-1 -mb-1" src="suncealand-assets/logos/chat-logo.svg" alt="">
              </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

Dark site footer with link columns and chat widget

A dark-themed website footer with a brand header, a chat prompt card at top right, four labeled link columns (About, Product, Follow, Application, Support), a Free trial link group, and a bottom legal link row with copyright text. It organizes navigation and contact links in a multi-column grid.

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 Bendis

Get the code for 13,400+ components

Blue Multi-Column Site Footer with Logo, Social Icons, and Link Columns

Bendis Footer with Link Columns and Social Icons

Footers from Metis

Get the code for 13,400+ components

Light Footer with Logo, Office and Contact Info, and Social Icons

Light Navigation Bar with Brand Logo, Links, and Contact Button

Footers from Shuffle UX

Get the code for 13,400+ components

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

Site footer with brand logo, navigation links, copyright, and social icons

Footers from Cronos

Get the code for 13,400+ components

Dark Site Footer with Link Columns and Email Subscribe

Cronos Website Footer with Four Link Columns

Footers from NEUB

Get the code for 13,400+ components

NEUB Site Footer with Link Columns and Social Icons

Bold Pink Site Footer with Link Columns and Social Icons

Footers from Casper

Get the code for 13,400+ components

Dark Footer with Logo, Contact Details, and Legal Links

Dark Footer with Casper Logo and Link Columns

Footers from Mirga

Get the code for 13,400+ components

Dark Website Footer with Newsletter Signup and Link Columns

Light gray site footer with logo, newsletter signup, and four link columns

Footers from Flow

Get the code for 13,400+ components

Flow Website Footer with Link Columns and Social Links

Footer with link columns and newsletter signup

Footers from Vista

Get the code for 13,400+ components

Vista Site Footer with Social Links and Gradient Wordmark

Gradient footer with newsletter signup and link columns

Footers from Cyber

Get the code for 13,400+ components

Dark Cyberpunk Footer with Multi-Column Links and Social Icons

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

Footers from FilyTreck

Get the code for 13,400+ components

Dark Footer with Newsletter Signup and Link Columns

Dark Site Footer with Link Columns and Newsletter Signup

Footers from Vendia

Get the code for 13,400+ components

Dark Site Footer with Logo, Link Columns, and Payment Icons

Dark Site Footer with Logo, Link Columns, and Payment Badges

Footers from Aurora

Get the code for 13,400+ components

Dark Green Site Footer with Brand, Link Columns, and Social Icons

Aurora dark footer with link columns and social icons

Footers from Shopky

Get the code for 13,400+ components

Shopky Website Footer with Logo, Links, Copyright, and Payment Icons

Shopky Website Footer with Contact Info and Payment Icons

Footers from asitrastudio

Get the code for 13,400+ components

Dark Site Footer with Link Columns and Newsletter Signup

Dark Newsletter Signup and Multi-Column Site Footer

Footers from Coleos

Get the code for 13,400+ components