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.

This tailwind example is contributed by KULDEEP, on 21-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Footer Call to Action Menu

Author KULDEEP

Tailwind v3.4 1.4k 3

Fork Fullscreen

<footer class="relative bg-gray-900 text-white pt-16 pb-8">
  
  <div class="absolute -top-12 left-0 w-full h-12" style="background-image: url('data:image/svg+xml;utf8,<svg viewBox=...'); background-size: cover;"></div>
  
  <div class="max-w-7xl mx-auto px-5 grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-10 relative z-10">
    
    <div>
      <h2 class="text-2xl font-bold text-pink-600 mb-4">Brand Name Or Logo</h2>
      <p class="mb-4 leading-relaxed opacity-90">Your premier destination for creative expression and professional production in the heart of Lucknow. We provide fully-equipped spaces for artists, creators, and businesses.</p>
      
      <div class="flex space-x-3">
        <a href="#" class="w-10 h-10 bg-white bg-opacity-10 flex items-center justify-center rounded-full text-white transition-transform hover:-translate-y-1 hover:bg-pink-600">
          <i class="fab fa-facebook-f"></i>
        </a>
        <a href="#" class="w-10 h-10 bg-white bg-opacity-10 flex items-center justify-center rounded-full text-white transition-transform hover:-translate-y-1 hover:bg-pink-600">
          <i class="fab fa-instagram"></i>
        </a>
        <a href="#" class="w-10 h-10 bg-white bg-opacity-10 flex items-center justify-center rounded-full text-white transition-transform hover:-translate-y-1 hover:bg-pink-600">
          <i class="fab fa-twitter"></i>
        </a>
        <a href="#" class="w-10 h-10 bg-white bg-opacity-10 flex items-center justify-center rounded-full text-white transition-transform hover:-translate-y-1 hover:bg-pink-600">
          <i class="fab fa-youtube"></i>
        </a>
      </div>
    </div>
    
    
    <div>
      <h3 class="text-xl text-pink-600 mb-6 border-b-2 border-pink-600 pb-2">Quick Links</h3>
      <ul class="space-y-3">
        <li><a href="#" class="flex items-center gap-2 opacity-90 hover:opacity-100 hover:translate-x-1 transition"><i class="fas fa-chevron-right text-pink-600"></i> Home</a></li>
        <li><a href="#" class="flex items-center gap-2 opacity-90 hover:opacity-100 hover:translate-x-1 transition"><i class="fas fa-chevron-right text-pink-600"></i> About Us</a></li>
        <li><a href="#" class="flex items-center gap-2 opacity-90 hover:opacity-100 hover:translate-x-1 transition"><i class="fas fa-chevron-right text-pink-600"></i> Services</a></li>
        <li><a href="#" class="flex items-center gap-2 opacity-90 hover:opacity-100 hover:translate-x-1 transition"><i class="fas fa-chevron-right text-pink-600"></i> Events</a></li>
        <li><a href="#" class="flex items-center gap-2 opacity-90 hover:opacity-100 hover:translate-x-1 transition"><i class="fas fa-chevron-right text-pink-600"></i> Gallery</a></li>
      </ul>
    </div>
    
    
    <div>
      <h3 class="text-xl text-pink-600 mb-6 border-b-2 border-pink-600 pb-2">Our Services</h3>
      <ul class="space-y-3">
        <li><a href="#" class="flex items-center gap-2 opacity-90 hover:opacity-100 hover:translate-x-1 transition"><i class="fas fa-chevron-right text-pink-600"></i> Recording Studio</a></li>
        <li><a href="#" class="flex items-center gap-2 opacity-90 hover:opacity-100 hover:translate-x-1 transition"><i class="fas fa-chevron-right text-pink-600"></i> Theatre Room</a></li>
        <li><a href="#" class="flex items-center gap-2 opacity-90 hover:opacity-100 hover:translate-x-1 transition"><i class="fas fa-chevron-right text-pink-600"></i> Workshop Space</a></li>
        <li><a href="#" class="flex items-center gap-2 opacity-90 hover:opacity-100 hover:translate-x-1 transition"><i class="fas fa-chevron-right text-pink-600"></i> Photoshoot Studio</a></li>
        <li><a href="#" class="flex items-center gap-2 opacity-90 hover:opacity-100 hover:translate-x-1 transition"><i class="fas fa-chevron-right text-pink-600"></i> Event Hosting</a></li>
      </ul>
    </div>
    
    
    <div>
      <h3 class="text-xl text-pink-600 mb-6 border-b-2 border-pink-600 pb-2">Contact Us</h3>
      <ul class="space-y-4 mb-6">
        <li class="flex items-start gap-4">
          <i class="fas fa-map-marker-alt text-pink-600 mt-1"></i>
          <div>
            India 
          </div>
        </li>
        <li class="flex items-start gap-4">
          <i class="fas fa-phone-alt text-pink-600 mt-1"></i>
          <div>
            <a href="tel:+91987654321" class="block hover:underline opacity-90 hover:opacity-100">+91 7307022824</a>
          
          </div>
        </li>
        <li class="flex items-start gap-4">
          <i class="fas fa-envelope text-pink-600 mt-1"></i>
          <div>
            <a href="mailto:kuldeepprajapati2111@gmail.com" class="block hover:underline opacity-90 hover:opacity-100">kuldeepprajapati2111@gmail.com</a>
          </div>
        </li>
      </ul>
      
      
      <h3 class="text-xl text-pink-600 mb-2 border-b-2 border-pink-600 pb-2">Newsletter</h3>
      <p class="mb-4 opacity-70">Subscribe to get updates on our latest events and offers.</p>
      <form class="flex">
        <input type="email" placeholder="Your Email" required class="flex-1 p-3 rounded-l-md focus:outline-none" />
        <button type="submit" class="bg-pink-600 hover:bg-pink-500 text-white p-3 rounded-r-md transition">
          <i class="fas fa-paper-plane"></i>
        </button>
      </form>
    </div>
  </div>
  
  
  <div class="mt-16 pt-8 border-t border-gray-700 text-center opacity-70 text-sm">
    <p>© 2024 Tab Creative Studio. All Rights Reserved. | Designed with <i class="fas fa-heart text-pink-600"></i> by Your Team</p>
  </div>
</footer>

Related Examples

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

Ron Hicks

4 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
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
Drinkware landing page

Maxim

1 year ago

2k
Landing page

Maxim

1 year ago

2.8k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k
Active Beauty Main Page

Maxim

1 year ago

1.8k
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.

Hamza Atig

1 year ago

1.3k
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Homayoun

9 months ago

1.2k
Floating Action Button
This component displays a fixed, floating contact button panel positioned at the bottom-right corner of the screen. It provides users with quick access to key communication channels including WhatsApp, Email, and Instagram. Each icon is styled with vibrant, platform-specific colors and includes subtle hover animations for an interactive user experience. Ideal for improving accessibility and encouraging user engagement, especially on mobile devices.

Arturo Lizana

1 year ago

2.2k
Hero section

Mohit Prajapati

4 years ago

12.9k