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

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

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

Author:
Maxim

3 months ago

550
Landing page

Author:
Maxim

3 months ago

811
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

2 months ago

268
Active Beauty Main Page

Author:
Maxim

2 months ago

296
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

133
CTA card with gradient border

Author:
Sameer Sultana

2 years ago

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

Author:
Pagedone

1 year ago

2.1k
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

3 weeks ago

23

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components