Home
KULDEEP
Footer

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 CSS v3. It is responsive. similar terms for this example are CTA,banner

Footer Call to Action Menu

Author KULDEEP

107

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

Author:
Ron Hicks

2 years ago

10.8k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11k
Get it on Google play / App store section

Author:
Rajesh kulkarni

2 years ago

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

Author:
Maxim

3 months ago

637
Landing page

Author:
Maxim

3 months ago

1k
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!

Author:
Abdul Baset Bappy

3 months ago

320
Active Beauty Main Page

Author:
Maxim

3 months ago

445
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.

Author:
Hamza Atig

2 months ago

162
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

7 months ago

2.9k
Responsive footer
Footer section with icons

Author:
Prajwal Hallale

2 years ago

12.4k
CTA with image

Author:
Fagundo67

2 years ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components