Home
Hamza Atig
Modern Dark Footer with Overlapping Gradient CTA

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 CSS v3. 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

110

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