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

963

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

3 years ago

11.5k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.5k
Get it on Google play / App store section

Author:
Rajesh kulkarni

2 years ago

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

2.1k
Drinkware landing page

Author:
Maxim

9 months ago

1.3k
Landing page

Author:
Maxim

9 months ago

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

9 months ago

676
Active Beauty Main Page

Author:
Maxim

8 months ago

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

8 months ago

1k
Footer

Author:
Abdul Baset Bappy

6 months ago

486
Call to Action (CTA) Section

Author:
ariaw

8 months ago

663
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.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components