Modern Dark Footer with Overlapping Gradient CTA

A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

This tailwind example is contributed by Hamza Atig, on 17-Apr-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner,Email campaign,Social media links,,simulation,copy,dummy,miniature,like

Footer Call to Action Form Navigations Gradient Newsletter Social media buttons Mockup

Author Hamza Atig

Tailwind v3.4 1.3k 2

Fork Fullscreen

<div class="h-[30px] bg-gray-100 flex items-center justify-center">
    <span class="text-gray-400">Page Content Area</span>
  </div>

<footer class="bg-black text-gray-300 relative">
    
    <div class="relative max-w-4xl mx-auto -mb-16 md:-mb-20 z-10 px-4 pt-24 md:pt-32">
      <div
        class="bg-gradient-to-r from-yellow-100 via-teal-100 to-pink-100 p-8 md:p-12 rounded-3xl shadow-xl text-center">
        <h2 class="text-2xl md:text-3xl font-semibold text-gray-900 mb-6">
          Get to know the world-class board of directors governing our organization.
        </h2>
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-8 rounded-full transition duration-200 shadow-md">
                    Meet our Board
                </button>
      </div>
    </div>

<div class="max-w-7xl mx-auto px-6 lg:px-8 pt-24 md:pt-32 pb-12">
      <div class="grid grid-cols-2 md:grid-cols-6 gap-8">

<div class="col-span-2 md:col-span-2">
          <p class="text-xs uppercase font-semibold text-gray-400 mb-3 tracking-wider">Sign up for NewsL TR</p>
          <input type="email" placeholder="Enter your email..." class="w-full bg-gray-800 border border-gray-700 rounded-full py-2 px-4 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 mb-3 appearance-none">
          <button class="w-full bg-gray-700 hover:bg-gray-600 text-gray-300 rounded-full py-2 px-4 text-sm transition duration-200 mb-6">
                        Next
                    </button>

<p class="text-xs uppercase font-semibold text-gray-400 mb-3 tracking-wider">Follow us</p>
          <div class="flex space-x-4 social-icon">
            <a href="#" class="text-gray-400 hover:text-white">
              <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
                  clip-rule="evenodd"></path>
              </svg>
            </a>
            <a href="#" class="text-gray-400 hover:text-white">
              <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path
                  d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z">
                </path>
              </svg>
            </a>
            <a href="#" class="text-gray-400 hover:text-white">
              <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd"
                  d="M12.315 2c2.43 0 2.784.01 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.05 1.024.06 1.378.06 3.808s-.01 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.05-1.378.06-3.808.06s-2.784-.01-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.05-1.024-.06-1.378-.06-3.808s.01-2.784.06-3.808c.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.01 9.255 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.06-1.03.048-1.634.208-2.121.41a3.109 3.109 0 00-1.162.763 3.109 3.109 0 00-.763 1.162c-.202.487-.362 1.09-.41 2.121-.05 1.023-.06 1.351-.06 3.807v.468c0 2.456.01 2.784.06 3.807.048 1.03.208 1.634.41 2.121a3.109 3.109 0 00.763 1.162 3.109 3.109 0 001.162.763c.487.202 1.09.362 2.121.41 1.023.05 1.351.06 3.807.06h.468c2.456 0 2.784-.01 3.807-.06 1.03-.048 1.634-.208 2.121-.41a3.109 3.109 0 001.162-.763 3.109 3.109 0 00.763-1.162c.202-.487.362-1.09.41-2.121.05-1.023.06-1.351.06-3.807v-.468c0-2.456-.01-2.784-.06-3.807-.048-1.03-.208-1.634-.41-2.121a3.109 3.109 0 00-.763-1.162 3.109 3.109 0 00-1.162-.763c-.487-.202-1.09-.362-2.121-.41-1.023-.05-1.351-.06-3.807-.06zm-1.928 2.81a6.156 6.156 0 100 12.312 6.156 6.156 0 000-12.312zm0 1.802a4.354 4.354 0 110 8.708 4.354 4.354 0 010-8.708zm6.441-2.553a1.44 1.44 0 100-2.88 1.44 1.44 0 000 2.88z"
                  clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>

<div>
          <p class="text-xs uppercase font-semibold text-gray-400 mb-3 tracking-wider">Start Learning</p>
          <nav class="flex flex-col space-y-2">
            <a href="#" class="text-sm hover:text-white transition duration-150">UX/UI Design</a>
            <a href="#" class="text-sm hover:text-white transition duration-150">Software Development</a>
            <a href="#" class="text-sm hover:text-white transition duration-150">Workplace Skills</a>
            <a href="#" class="text-sm hover:text-white transition duration-150">Job Search</a>
            <a href="#" class="text-sm hover:text-white transition duration-150">Digital Freelancing</a>
          </nav>
        </div>

<div>
          <p class="text-xs uppercase font-semibold text-gray-400 mb-3 tracking-wider">Open Study Hub</p>
          <nav class="flex flex-col space-y-2">
            <a href="#" class="text-sm hover:text-white transition duration-150">Job Search</a>
            <a href="#" class="text-sm hover:text-white transition duration-150">Soft Skills</a>
            <a href="#" class="text-sm hover:text-white transition duration-150">Workplace Success</a>
            <a href="#" class="text-sm hover:text-white transition duration-150">Tech careers</a>
          </nav>
        </div>

<div>
          <p class="text-xs uppercase font-semibold text-gray-400 mb-3 tracking-wider">Other Resources</p>
          <nav class="flex flex-col space-y-2">
            <a href="#" class="text-sm hover:text-white transition duration-150">Events</a>
          </nav>
        </div>

<div>
          <p class="text-xs uppercase font-semibold text-gray-400 mb-3 tracking-wider">About Re:Coded</p>
          <nav class="flex flex-col space-y-2 mb-6">
            <a href="#" class="text-sm hover:text-white transition duration-150">Mission</a>
            <a href="#" class="text-sm hover:text-white transition duration-150">Blog</a>
          </nav>

<p class="text-xs uppercase font-semibold text-gray-400 mb-3 tracking-wider">Take Action</p>
          <nav class="flex flex-col space-y-2">
            <a href="#" class="text-sm hover:text-white transition duration-150">Donate</a>
            <a href="#" class="text-sm hover:text-white transition duration-150">Partner</a>
          </nav>
        </div>

</div>
    </div>

<div class="border-t border-gray-800 mt-8 md:mt-12 py-6">
      <div
        class="max-w-7xl mx-auto px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center text-xs text-gray-500">
        <div class="flex flex-wrap justify-center sm:justify-start gap-x-4 gap-y-1 mb-3 sm:mb-0">
          <a href="#" class="hover:text-gray-300">Privacy Policy</a>
          <a href="#" class="hover:text-gray-300">Terms of Use</a>
          <a href="#" class="hover:text-gray-300">Cookies policy</a>
          <a href="#" class="hover:text-gray-300">Media Kit</a>
          <a href="#" class="hover:text-gray-300">US Financials</a>
        </div>
        <div class="flex items-center gap-2 text-center sm:text-right">
          <span class="font-bold text-sm text-white">your company</span>
          <span>Copyright 2025 @ Company . All rights reserved.</span>
        </div>
      </div>
    </div>
  </footer>

</body>

Related Examples

Call to Action (for app stores)
Download app section with Playstore and Appstore button

Ron Hicks

3 years ago

12.2k
Subscribe to our newsletter section

Conan Hilton

4 years ago

12k
Get it on Google play / App store section

Rajesh kulkarni

3 years ago

11.2k
Sign up for newsletter form

Amit Pachange

3 years ago

12.7k
Footer with social media buttons

Sophia Baker

3 years ago

15k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

R Thapa

2 years ago

18.3k
Newsletter Signup Form
It features a clean and modern design with a background illustration, making it visually appealing.

TailwindFlex

2 years ago

8.5k
Domain For Sale Template
Domain For Sale Template

Geoffrey Callaghan

2 years ago

5k
Waitlist signup form

Anonymous

2 years ago

5.5k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Pagedone

2 years ago

2.7k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Emdadul Islam

2 years ago

3.5k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k