Footer

Simple Dark footer

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

Footer

Author KULDEEP

Tailwind v3.4 1.3k 1

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

Footer

Abdul Baset Bappy

1 year ago

1k
Footer with social media icons
If you want to use colorful social media icons with address location, sitemap links and newsletter.

Pagedone

2 years ago

4.3k
Small Footer

Abhijit Sen

3 years ago

12k
Five columns with subscribe button
This example of tailwind css footer can be used if you want five columns in your footer with brand logo, sitemap links, description and social media account with additional subscibe button to connect with your website.

Pagedone

2 years ago

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

Pagedone

2 years ago

3.5k
Simple centered footer
Use this example for simple footer with horizontal sitemap links, brand logo, and social media accounts.This example can also be used as a tailwind sticky footer.

Pagedone

2 years ago

3.5k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

ABDESLAMI ACHRAF

1 year ago

4.4k
Footer
responsive footer

Aman kumar

2 years ago

9.4k
portifolio
skills

ishimwe prince

1 year ago

1.6k
Basic footer
Simple footer with follow us section

Anonymous

2 years ago

2.8k
Four columns with subscribe form
Use this example for four column footer with subscribe form, brand logo, sitemap links and social media accounts.

Pagedone

2 years ago

2.7k
Dark Footer with subscribe form
Use below exmaple of Tailwind CSS Dark Footer with Newsletter Subscription Form with brand logo and site links.

Pagedone

2 years ago

3.4k