Footers Components

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.

Footers generator

Footers from Saturn

Bootstrap

Saturn

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none mb-24">
      <div class="row">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="mw-sm">
            <h3 class="font-heading mb-6">
              <span>Ready to get</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">started?</span>
            </h3>
            <p class="text-secondary mb-16">If there are questions you want to ask, we will answer all your question</p>
            <form action="">
              <div class="d-flex flex-column flex-sm-row gap-4">
                <input class="form-control ps-0 rounded-0 border-0 border-bottom border-light-dark bg-transparent" type="email" name="" id="" placeholder="Enter your email">
                <a class="btn btn-sm btn-primary rounded-pill" href="#">Subscribe</a>
              </div>
            </form>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mw-md ms-lg-auto">
            <h6 class="fs-5 lh-sm mb-12">Maybe your question is have been answered, check this out.</h6>
            <div>
              <a class="btn btn-link text-start d-flex justify-content-between w-100 px-0 pt-0 pb-5 mb-5 border-top-0 border-start-0 border-end-0 border-bottom border-light-dark text-decoration-none rounded-0" 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

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.

Footers 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.

Footers generator

Footers from Flaro

Bulma

Flaro

<section class="has-background-white pt-24 is-clipped">
    <div class="container px-8">
        <div class="pb-20" style="border-bottom: 1px solid #bab5b6; width: 100%;">
            <div class="columns is-justify-content-center">
                <div class="column is-2">
                    <h3 class="mb-6 has-text-weight-semibold has-text-dark">Company</h3>
                    <ul>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">About Us</a></li>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Careers</a></li>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Press</a></li>
                        <li><a class="has-text-grey has-text-weight-medium" href="#">Blog</a></li>
                    </ul>
                </div>
                <div class="column is-2">
                    <h3 class="mb-6 has-text-weight-semibold has-text-dark">Pages</h3>
                    <ul>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Login</a></li>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Register</a></li>
                        <li class="mb-3"><a class="has-text-grey has-text-weight-medium" href="#">Add list</a></li>
                        <li><a class="has-text-grey has-text-weight-medium" href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="column is-2">
                    <h3 class="mb-6 has-text-weight-semibold has-text-dark">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

Footers from Flaro

Bootstrap

Flaro

<section class="pt-24 pb-8">
  <div class="container">
    <div class="row pb-20 mb-6 border-bottom">
      <div class="col-12 col-lg-7 mb-16 mb-lg-0">
        <div class="row">
          <div class="col-6 col-md-3 mb-16 mb-md-0">
            <h6 class="mb-6" >Company</h6>
            <ul class="list-unstyled">
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >About Us</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >Careers</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >Press</a></li>
              <li><a class="btn btn-link p-0 text-secondary" href="#" >Blog</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-3 mb-16 mb-md-0">
            <h6 class="mb-6" >Pages</h6>
            <ul class="list-unstyled">
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >Login</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >Register</a></li>
              <li class="mb-4"><a class="btn btn-link p-0 text-secondary" href="#" >Add list</a></li>
              <li><a class="btn btn-link p-0 text-secondary" href="#" >Contact</a></li>
            </ul>
          </div>
          <div class="col-6 col-md-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

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.

Footers generator

Footers from Gradia

Bootstrap

Gradia

<section class="position-relative py-24 bg-white overflow-hidden"><img class="position-absolute bottom-0 start-0" src="gradia-assets/elements/footers/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row g-16">
      <div class="col-12 col-md-6 col-lg-6">
        <div class="d-flex flex-column justify-content-between h-100">
          <div class="mb-16"><a class="d-inline-block" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-black.svg" alt=""/></a></div>
          <div>
            <h3 class="fs-18 fw-medium mb-4" >The boldest SaaS kit in the market.</h3>
            <p class="fs-19 text-muted mb-0" >&copy; Copyright 2022. All Rights Reserved by Gradia.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-2">
        <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-9" style="letter-spacing: 1px;" >Company</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Features</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Pricing</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Affiliate Program</h3></a></li>
          <li class="nav-item"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Press Kit</h3></a></li>
        </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

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.

Footers generator

Footers from Solstice

Bootstrap

Solstice

<section class="py-12 pt-lg-24">
  <div class="container position-relative">
    <div class="d-none d-lg-block position-absolute top-50 start-50 translate-middle">
      <div class="d-flex align-items-center"><a class="btn p-0 me-6 btn-link text-dark-light" href="#">Platform</a><a class="btn p-0 me-6 btn-link text-dark-light" href="#">Features</a><a class="btn p-0 me-6 btn-link text-dark-light" href="#">How it works</a><a class="btn p-0 me-6 btn-link text-dark-light" href="#">Resources</a><a class="btn p-0 btn-link text-dark-light" href="#">FAQs</a></div>
    </div>
    <div class="row justify-content-between">
      <div class="col-auto">
        <a class="d-inline-block" href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
      </div>
      <div class="col-auto">
        <div class="d-flex">
          <a class="btn me-3 btn-outline-light p-1 border-0 rounded" 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.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="#A3A3A3"></path>
            </svg>
          </a>
          <a class="btn me-3 btn-outline-light p-1 border-0 rounded" 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="#A3A3A3"></path>
            </svg>
          </a>
          <a class="btn btn-outline-light p-1 border-0 rounded" 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

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.

Footers generator

Footers from Basko

Bootstrap

Basko

<section class="py-12 py-lg-24 bg-dark">
  <div class="container">
    <div class="position-relative px-8 px-md-11 py-10 mb-16 bg-white rounded-4 overflow-hidden">
      <img class="position-absolute top-0 start-0 w-100 h-100" src="basko-assets/images/gradient.png" alt="">
      <div class="position-relative row align-items-center">
        <div class="col-12 col-lg-7 mb-10 mb-lg-0">
          <h2 class="text-white mb-0">Grow your business fast with Basko Productivity Tool.</h2>
        </div>
        <div class="col-12 col-lg-5 text-lg-end"><a class="btn btn-dark" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </div>
    <div class="row mb-n12">
      <div class="col-12 col-sm-6 col-lg-3 mb-12">
        <div>
          <span class="d-block fw-semibold text-white mb-7">Company</span>
          <ul class="list-unstyled mb-0">
            <li class="mb-4"><a class="d-inline-block text-white " href="#">About</a></li>
            <li class="mb-4"><a class="d-inline-block text-white " href="#">Features</a></li>
            <li class="mb-4"><a class="d-inline-block text-white " href="#">Works</a></li>
            <li><a class="d-inline-block text-white " href="#">Career</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 mb-12">

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

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.

Footers 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.

Footers generator

Footers from Nightsable

Bootstrap

Nightsable

<section class="bg-white position-relative overflow-hidden">
  <div class="pb-24 bg-light-light">
    <div class="d-flex justify-content-center mb-12 mb-md-24">
      <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="111" viewBox="0 0 1440 111" fill="none">
        <path d="M0 -571H1440V31C1440 75.1828 1404.18 111 1360 111H80C35.8173 111 0 75.1828 0 31V-571Z" fill="#0E0F11"></path>
      </svg>
    </div>
    <div class="container">
      <div class="mw-md mw-md-3xl mx-auto mw-xl-none">
        <div class="row mb-24">
          <div class="col-xl-3 mb-12 mb-xl-0">
            <div class="mw-xs"><img class="img-fluid mb-7" src="nightsable-assets/logos/logo-dark.svg" alt="">
              <p class="pe-10 text-secondary-light">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
            </div>
          </div>
          <div class="col-md-6 col-xl-5 mb-12 mb-md-0">
            <div class="d-flex gap-24 gap-xl-10 justify-content-xl-around">
              <div>
                <h6 class="mb-6 fs-7 fw-medium text-black">About</h6>
                <ul class="list-unstyled mb-0">
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Contact</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Blog</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Our Storry</a></li>
                  <li class="mb-2"><a class="btn p-0 fw-medium text-secondary-light" href="#">Careers</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

Footers from Zeus

Bulma

Zeus

<section class="section py-12 py-20-desktop">
  <div class="container">
    <div class="columns mb-8 pb-20" style="border-bottom: 1px solid #DADFE9;">
      <div class="column is-4 mb-12 mb-0-desktop">
        <a class="is-inline-block mb-3 title is-5 has-text-dark" href="#">
          <img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px" width="auto">
        </a>
        <p class="mb-6 has-mw-xs has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div>
          <a class="is-inline-block mr-4" href="#" style="width: 40px;">
            <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="is-inline-block mr-4" href="#" style="width: 40px;">
            <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="is-inline-block" href="#" style="width: 40px;">
            <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

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.

Footers generator

Footers from Zeus

Bootstrap

Zeus

<section class="py-12 py-lg-20">
  <div class="container">
    <div class="row mb-8 pb-20 border-bottom">
      <div class="col-12 col-lg-4 mb-12 mb-lg-0"><a class="d-inline-block mb-3 h4 text-decoration-none" href="#"><img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px" width="auto"/></a>
        <p class="mb-6 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div><a class="d-inline-block me-4" href="#" style="width: 40px;">
            <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="d-inline-block me-4" href="#" style="width: 40px;">
            <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="d-inline-block me-4" href="#" style="width: 40px;">
            <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></div>
      </div>
      <div class="col-12 col-lg-8">
        <div class="row">
          <div class="col-6 col-lg-3 mb-4 mb-lg-0">
            <h3 class="mb-6 h6">Company</h3>
            <ul class="list-unstyled">
              <li class="mb-4" style="font-size: 14px;"><a class="text-muted text-decoration-none" href="#">About Us</a></li>
              <li class="mb-4" style="font-size: 14px;"><a class="text-muted text-decoration-none" href="#">Careers</a></li>
              <li class="mb-4" style="font-size: 14px;"><a class="text-muted text-decoration-none" href="#">Press</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

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.

Footers 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.

Footers generator