footer

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 27-Nov-2025. Component is made with Tailwind v3.4. It is responsive.

Footer

Author Raul antonio de la cruz hernandez

Tailwind v3.4 851 2

Fork Fullscreen

<footer class="max-w-7xl mx-auto mt-24 pb-8">
        
        <div class="relative w-full rounded-[1.5rem] overflow-hidden bg-[#050202] text-white px-8 py-16 md:px-16 md:py-20 mb-20 shadow-2xl isolate">
            
            
            <div class="absolute inset-0 z-0">
               
               <div class="absolute inset-0 bg-gradient-to-br from-black via-[#0f0404] to-[#1a0505]"></div>
               
               
               <div class="absolute -top-[50%] -right-[10%] w-[120%] h-[200%] bg-[radial-gradient(circle_closest-side,_var(--tw-gradient-stops))] from-orange-900/40 via-red-950/20 to-transparent blur-[120px]"></div>

<div class="absolute -top-[20%] -right-[15%] w-[800px] h-[800px] bg-[radial-gradient(circle_closest-side,_var(--tw-gradient-stops))] from-amber-500/20 via-orange-600/10 to-transparent blur-[90px] mix-blend-screen opacity-80"></div>

<div class="absolute -top-[5%] -right-[5%] w-[400px] h-[400px] bg-[radial-gradient(circle,_var(--tw-gradient-stops))] from-amber-100/30 via-orange-200/5 to-transparent blur-[60px] mix-blend-overlay"></div>
               
               
               <div class="absolute top-0 right-0 w-[800px] h-[800px] opacity-40 mix-blend-screen pointer-events-none">
                  <div class="absolute top-0 right-0 w-[150%] h-[1px] bg-gradient-to-r from-transparent via-amber-100 to-transparent rotate-[-35deg] transform origin-top-right blur-[1px]"></div>
                  <div class="absolute top-0 right-0 w-[150%] h-[40px] bg-gradient-to-r from-transparent via-orange-500/10 to-transparent rotate-[-35deg] transform origin-top-right blur-[20px]"></div>
               </div>
            </div>

<div class="relative z-10 flex flex-col md:flex-row items-start md:items-end justify-between gap-10">
                <div class="max-w-xl">
                    <h2 class="text-4xl md:text-6xl font-medium tracking-tight mb-8 leading-[1.1]">Stay ahead without the noise.</h2>
                    <div class="flex flex-col sm:flex-row gap-3 w-full max-w-md">
                        <input type="email" placeholder="Enter your email" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:bg-white/10 transition-colors backdrop-blur-sm" />
                        <button class="bg-white text-black px-6 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors whitespace-nowrap">Subscribe</button>
                    </div>
                </div>
            </div>
        </div>

<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 border-b border-slate-100 pb-16 mb-12">
            
            <div class="lg:col-span-4">
                 <p class="text-xl font-medium text-slate-900 max-w-[280px] leading-snug">
                    Designed for those who build the future quietly.
                 </p>
            </div>
            
            
            <div class="lg:col-span-8 grid grid-cols-2 md:grid-cols-4 gap-8">
                
                <div class="flex flex-col gap-4">
                    <h4 class="font-medium text-slate-900">Platform</h4>
                    <ul class="space-y-3 text-slate-500 text-sm">
                        <li><a href="#" class="hover:text-slate-900 transition-colors">How It Works</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Features</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Integrations</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Roadmap</a></li>
                    </ul>
                </div>
                
                <div class="flex flex-col gap-4">
                    <h4 class="font-medium text-slate-900">Company</h4>
                    <ul class="space-y-3 text-slate-500 text-sm">
                         <li><a href="#" class="hover:text-slate-900 transition-colors">About</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Careers</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Culture</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Press Kit</a></li>
                    </ul>
                </div>
                 
                <div class="flex flex-col gap-4">
                    <h4 class="font-medium text-slate-900">Resources</h4>
                     <ul class="space-y-3 text-slate-500 text-sm">
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Blog</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Docs</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Support</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">API Reference</a></li>
                    </ul>
                </div>
                 
                <div class="flex flex-col gap-4">
                    <h4 class="font-medium text-slate-900">Legal</h4>
                     <ul class="space-y-3 text-slate-500 text-sm">
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Privacy Policy</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Terms of Use</a></li>
                        <li><a href="#" class="hover:text-slate-900 transition-colors">Security</a></li>
                    </ul>
                </div>
            </div>
        </div>

<div class="flex flex-col md:flex-row justify-between items-center gap-4 text-sm font-medium">
            <div class="flex items-center gap-2 text-slate-900">
                 
                 <div class="w-5 h-5 bg-slate-900 rounded-full flex items-center justify-center text-white">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"></path></svg>
                 </div>
                 <span class="font-bold tracking-tight">rauantodev</span>
            </div>
            <div class="text-slate-500">
                Copyright © 2025 rauantodev
            </div>
        </div>
    </footer>

</div>
</template>

Related Examples

canvas fully covers
canvas fully covers

Balogun David Olajuwon

1 year ago

1.3k
Footer, TailwindFlex v2
Another footer version of tailwindflex.com Example users randomly picked: Samuel & Prajwal

Matti

1 year ago

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

Pagedone

2 years ago

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

KULDEEP

1 year ago

1.5k
Simple footer

Piet Vriend

3 years ago

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

Pagedone

2 years ago

3.4k
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
Newsletter with address location
Use this example to first show brand logo card, then show address locations of your company, a newsletter sign-up form.

Pagedone

2 years ago

3.5k
Default Tailwind Footer
Use this example of a footer section divided in five columns with brand logo, desciption, sitemap links and social media accounts.

Pagedone

2 years ago

3.5k
Footer with gallery
Use this example if you want to add gallery of images into your footer with brand logo, sitemap links and copyright notice.

Pagedone

2 years ago

3k
Subscribe to our newsletter section

Conan Hilton

4 years ago

12k
Simple Footer 2

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.5k