Home
KULDEEP
Footer

Footer

Simple Dark footer

This tailwind example is contributed by KULDEEP, on 02-Jul-2025. Component is made with Tailwind CSS v3. It is responsive.

Footer

Author KULDEEP

819

Fork Fullscreen

<footer class="bg-gray-900 text-gray-200 px-6 py-12 relative overflow-hidden">
  
  <div class="absolute inset-0 flex justify-center items-center pointer-events-none">
    <div class="w-80 h-80 rounded-full bg-purple-700 opacity-10 animate-blob3"></div>
    <div class="w-60 h-60 rounded-full bg-pink-700 opacity-10 animate-blob4"></div>
  </div>

<div class="max-w-7xl mx-auto grid md:grid-cols-4 gap-8 relative z-10">
    
    <div>
      <h2 class="text-2xl font-bold mb-4 text-white">YourBrand</h2>
      <p class="mb-4">Creating innovative solutions for a better future. Stay connected with us!</p>
      <div class="flex space-x-4">
        <a href="#" class="hover:text-purple-400 transition duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            
            <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 5 3.66 9.12 8.44 9.88v-6.99H12v-2.89h-1.56V9.41c0-1.54.92-2.39 2.34-2.39.68 0 1.39.12 1.39.12v1.53h-.78c-.77 0-1.01.48-1.01 1.02v1.27h2.73l-.44 2.89h-2.29V22C18.34 21.12 22 17 22 12z"/>
          </svg>
        </a>
        <a href="#" class="hover:text-purple-400 transition duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            
            <path d="M24 4.56c-.89.39-1.84.66-2.84.78 1.02-.61 1.8-1.58 2.17-2.73-.95.56-2.01.97-3.13 1.19-.9-.96-2.19-1.56-3.61-1.56-2.73 0-4.94 2.21-4.94 4.94 0 .39.04.77.12 1.14-4.1-.21-7.75-2.17-10.19-5.16-.43.74-.68 1.6-.68 2.52 0 1.74.89 3.28 2.24 4.17-.83-.03-1.61-.26-2.29-.63v.06c0 2.43 1.73 4.46 4.03 4.92-.42.11-.86.17-1.31.17-.32 0-.63-.03-.93-.09.63 1.97 2.45 3.41 4.6 3.45-1.68 1.32-3.81 2.11-6.11 2.11-.39 0-.78-.02-1.16-.07 2.19 1.4 4.8 2.22 7.61 2.22 9.13 0 14.13-7.56 14.13-14.13 0-.22-.01-.44-.02-.66.97-.7 1.8-1.58 2.46-2.58z"/>
          </svg>
        </a>
        <a href="#" class="hover:text-purple-400 transition duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            
            <path d="M12 2.16c3.18 0 3.58.01 4.85.07 1.17.05 1.98.24 2.43.41.58.22 1 .48 1.44.92.44.44.7.86.92 1.44.17.45.36 1.26.41 2.43.06 1.27.07 1.67.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.24 1.98-.41 2.43-.22.58-.48 1-.92 1.44-.44.44-.86.7-1.44.92-.45.17-1.26.36-2.43.41-1.27.06-1.67.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.98-.24-2.43-.41-.58-.22-1-.48-1.44-.92-.44-.44-.7-.86-.92-1.44-.17-.45-.36-1.26-.41-2.43-.06-1.27-.07-1.67-.07-4.85s.01-3.58.07-4.85c.05-1.17.24-1.98.41-2.43.22-.58.48-1 .92-1.44.44-.44.86-.7 1.44-.92.45-.17 1.26-.36 2.43-.41 1.27-.06 1.67-.07 4.85-.07zm0-2.16C8.75 0 8.33.01 7.06.07 5.79.13 4.78.33 3.98.66 3.24.96 2.61 1.33 2 1.95c-.72.66-1.38 1.38-1.95 2.09-.33.8-.53 1.81-.59 3.08C.01 8.33 0 8.75 0 12s.01 3.67.07 4.94c.06 1.27.26 2.28.59 3.08.57.71 1.23 1.43 1.95 2.09.66.66 1.38 1.38 2.09 1.95.8.33 1.81.53 3.08.59 1.27.06 1.69.07 4.94.07s3.67-.01 4.94-.07c1.27-.06 2.28-.26 3.08-.59.71-.57 1.43-1.23 2.09-1.95.66-.66 1.38-1.38 1.95-2.09.33-.8.53-1.81.59-3.08.06-1.27.07-1.69.07-4.94s-.01-3.67-.07-4.94c-.06-1.27-.26-2.28-.59-3.08-.57-.71-1.23-1.43-1.95-2.09-.66-.66-1.38-1.38-2.09-1.95-.8-.33-1.81-.53-3.08-.59C15.67.01 15.25 0 12 0zm0 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zm0 10.16a4 4 0 110-8 4 4 0 010 8zm6.4-11.84a1.44 1.44 0 11-2.88 0 1.44 1.44 0 012.88 0z"/>
          </svg>
        </a>
      </div>
    </div>
    
    <div>
      <h3 class="text-xl font-semibold mb-4">Quick Links</h3>
      <ul class="space-y-2">
        <li><a href="#" class="hover:text-purple-400 transition">Home</a></li>
        <li><a href="#" class="hover:text-purple-400 transition">About</a></li>
        <li><a href="#" class="hover:text-purple-400 transition">Services</a></li>
        <li><a href="#" class="hover:text-purple-400 transition">Contact</a></li>
      </ul>
    </div>
    
    <div>
      <h3 class="text-xl font-semibold mb-4">Subscribe to our Newsletter</h3>
      <form class="flex flex-col sm:flex-row gap-2">
        <input type="email" placeholder="Your email" class="p-3 rounded-full bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-purple-500" />
        <button type="submit" class="bg-purple-600 hover:bg-purple-500 text-white px-6 py-3 rounded-full font-semibold transition duration-300">
          Subscribe
        </button>
      </form>
    </div>
    
    <div>
      <h3 class="text-xl font-semibold mb-4">Contact Us</h3>
      <p class="mb-2">123 Main Street, City, Country</p>
      <p class="mb-2">Email: info@yourbrand.com</p>
      <p>Phone: +123 456 7890</p>
    </div>
  </div>
  
  <div class="mt-12 text-center text-gray-400 text-sm relative z-10">
    &copy; 2024 YourBrand. All rights reserved.
  </div>
</footer>

<style>
  @keyframes blob3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.1); }
  }
  @keyframes blob4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-15px, 25px) scale(0.9); }
  }
  .animate-blob3 {
    animation: blob3 30s infinite ease-in-out;
  }
  .animate-blob4 {
    animation: blob4 35s infinite ease-in-out;
  }
</style>

Related Examples

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

Author:
Pagedone

1 year ago

2.1k
Footer

Author:
Ivan K

1 year ago

3.4k
Footer for blog
https://github.com/tailwindow/component

Author:
Prem..

3 years ago

18.3k
Default Tailwind Footer
Use this example of a footer section divided in five columns with brand logo, desciption, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

3k
Header and footer with Doodle design with Tailwind CSS
Creative responsive header and footer with doodle patterns built with Tailwind CSS. Features animated SVG doodles, interactive CTA buttons, and Fully customizable components for web projects

Author:
Homayoun

2 months ago

120
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.7k
Basic footer
Simple footer with follow us section

Author:
Anonymous

1 year ago

2.2k
Footer with Member info
Use below footer tailwind template which show number of member who joins the community.

Author:
Pagedone

1 year ago

2.3k
Standard footer
You can use this example for five column footer with social media accounts, sitemap links, copyright notice and brand logo.

Author:
Pagedone

1 year ago

2.7k
Footer - Htmlwind
Simple centerd footer

Author:
Htmlwind

8 months ago

653
Horizontal footer
Use this horizontal footer tailwind css example if you want horizontal footer layout side by side, which includes sitemap links, brand logo and social media accounts.

Author:
Pagedone

1 year ago

2.9k
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

6 months ago

583

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components