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

370

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

Pre-footer Newsletter
Use this example with a Newsletter section before the footer, a sitemap, the logo of your brand and social media accounts.

Author:
Pagedone

1 year ago

2.7k
Responsive footer

Author:
Lukas Müller

2 years ago

11k
Crafting a Responsive Footer with TypeScript, and Tailwind CSS
This is a well-structured and comprehensive footer section that uses Tailwind CSS for styling and layout. Here’s a brief explanation of what each part does: Footer Container (<footer class="bg-gray-800">): The footer is wrapped in a <footer> element with a dark background using the bg-gray-800 class. The aria-labelledby="footer-heading" attribute is used for accessibility, linking the <footer> to the invisible heading (<h2 id="footer-heading" class="sr-only">Footer</h2>). Main Content Area: The content inside the footer is centered and spaced using utility classes like max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8. Footer Sections: The footer is divided into several sections using grid layouts (xl:grid xl:grid-cols-5 xl:gap-8), which organize content into columns. Each section (Solutions, Support, Company, Legal) contains a heading with a list of links. These links are styled with Tailwind classes for consistent spacing and hover effects (text-base text-gray-300 hover:text-white). Language & Currency Selector: This section provides dropdowns for selecting language and currency. Tailwind's form utilities (@tailwindcss/forms plugin) are used to style the select elements. Newsletter Subscription Form: A subscription form is provided with an email input and a submit button. The form is styled to be responsive, with focus states for accessibility (focus:ring-2 focus:ring-offset-2). Social Media Links: Social media icons (Facebook, Instagram, etc.) are included, each wrapped in a link with hover effects. Icons are created using SVGs, which are scalable and look sharp at any size. Final Section: The footer concludes with another grid layout, ensuring spacing and alignment for different screen sizes. Customization Tips: Colors: You can easily customize the colors using Tailwind's utility classes (e.g., bg-gray-800, text-gray-400) to match your design. Icons: Replace SVGs with the appropriate icons for your needs. You might use a different icon set or add more icons. Responsive Design: Tailwind's utility classes like sm:, md:, lg:, xl: ensure that the footer is responsive across devices. Adjust the layout or padding if needed. Additional Considerations: SEO: Ensure the links in the footer point to meaningful pages to improve SEO. Accessibility: Consider adding aria-labels to the form elements and social media links to enhance accessibility further. This footer is ready to be integrated into a Tailwind CSS-powered project, offering both aesthetic appeal and functional utility.

Author:
zobaidul kaziex

1 year ago

2.5k
subscribe form in Footer
You can use following subscribe form in your tailwind footer section beside contact information such as email address, phone numbers etc and You can also shows community counts.

Author:
Pagedone

1 year ago

2.4k
Small Footer

Author:
Abhijit Sen

2 years ago

11.5k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

3 months ago

434
Tailwind Footer Template
Following is the Tailwind CSS template for creative footer with contact information like address, email, phone number and a newsletter with social icons and site links.

Author:
Pagedone

1 year ago

2.6k
beautifull footer
We create a Advance animated footer section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2.1k
Footer
A footer is a critical part of any professional website. A footer ensures your website is complete, professional, user-friendly, and legally compliant. It's where users go for answers when they're done scrolling.

Author:
KULDEEP

2 months ago

646
Footer for blog
https://github.com/tailwindow/component

Author:
Prem..

3 years ago

17.6k
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

1.7k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components