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

Hero

Author Raul antonio de la cruz hernandez

Tailwind v3.4 836 3

Fork Fullscreen

<div class="absolute top-[-10%] right-[-10%] w-[90vw] h-[90vh] z-0 blur-[80px] opacity-80 animate-pulse-slow">
            
            <div class="absolute top-[10%] right-[20%] w-[600px] h-[600px] bg-gradient-to-br from-red-600 via-orange-500 to-transparent rounded-full mix-blend-screen opacity-90 transform rotate-12"></div>
            
            <div class="absolute top-[40%] right-[5%] w-[700px] h-[700px] bg-gradient-to-tl from-blue-700 via-teal-500 to-transparent rounded-full mix-blend-screen opacity-80 transform -rotate-12"></div>
            
            <div class="absolute top-[30%] right-[15%] w-[400px] h-[400px] bg-purple-500 rounded-full mix-blend-screen opacity-60 blur-[100px]"></div>
        </div>
    </div>

<main class="relative z-10 max-w-7xl mx-auto px-6 pt-32 pb-64">
        
        
        <div class="max-w-2xl">
            <span class="text-gray-400 font-medium tracking-wide text-sm mb-4 block">Get Early Access</span>
            <h1 class="text-6xl md:text-7xl font-medium tracking-tight text-white mb-8 leading-tight">
                Ready to step in?
            </h1>
            
            
            <button class="group relative px-6 py-3 bg-white/5 hover:bg-white/10 text-white rounded-lg transition-all duration-300 overflow-hidden border border-white/10">
                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></div>
                <span class="relative font-medium tracking-wide">Start Building</span>
            </button>
        </div>

</main>

<footer class="absolute bottom-0 w-full z-20 border-t border-white/5 bg-black/40 backdrop-blur-3xl">
        <div class="max-w-7xl mx-auto px-6 py-12 md:py-16">
            
            <div class="grid grid-cols-1 md:grid-cols-12 gap-12 mb-16">
                
                <div class="md:col-span-5 flex flex-col justify-between h-full">
                    <div>
                        <div class="flex items-center gap-2 mb-6 text-white">

<span class="text-xl font-semibold tracking-tight">rauantodev</span>
                        </div>
                        <p class="text-gray-400 text-sm leading-relaxed max-w-sm mb-8">
                            The infrastructure that empowers the next generation of intelligent applications to run faster and deliver real results.
                        </p>
                    </div>

<div class="flex gap-4">
                        <a href="#" class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-gray-400 hover:text-white transition-colors border border-white/5">
                            
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-gray-400 hover:text-white transition-colors border border-white/5">
                            
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-gray-400 hover:text-white transition-colors border border-white/5">
                           
                           <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>
                        </a>
                    </div>
                </div>

<div class="md:col-span-2 md:col-start-8">
                    <h4 class="text-white font-medium mb-6">Product</h4>
                    <ul class="space-y-4 text-sm text-gray-500">
                        <li><a href="#" class="hover:text-teal-400 transition-colors">Overview</a></li>
                        <li><a href="#" class="hover:text-teal-400 transition-colors">Features</a></li>
                        <li><a href="#" class="hover:text-teal-400 transition-colors">Roadmap</a></li>
                        <li><a href="#" class="hover:text-teal-400 transition-colors">Integrations</a></li>
                    </ul>
                </div>

<div class="md:col-span-2">
                    <h4 class="text-white font-medium mb-6">Resources</h4>
                    <ul class="space-y-4 text-sm text-gray-500">
                        <li><a href="#" class="hover:text-teal-400 transition-colors">Blog</a></li>
                        <li><a href="#" class="hover:text-teal-400 transition-colors">Help Center</a></li>
                        <li><a href="#" class="hover:text-teal-400 transition-colors">Community</a></li>
                        <li><a href="#" class="hover:text-teal-400 transition-colors">API Docs</a></li>
                    </ul>
                </div>
            </div>

<div class="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-600">
                <p>© 2025 rauantodev. All rights reserved.</p>
                <div class="flex gap-8">
                    <a href="#" class="hover:text-gray-400 transition-colors">Privacy Policy</a>
                    <a href="#" class="hover:text-gray-400 transition-colors">Terms of Service</a>
                    <a href="#" class="hover:text-gray-400 transition-colors">Cookie Policy</a>
                </div>
            </div>
        </div>
    </footer>
  </div>
</div>

body {
  font-family: 'Inter', sans-serif;
  background-color: black;
}

/* Animación opcional para darle "vida" al gradiente de fondo */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.animate-pulse-slow {
  animation: pulse-slow 8s infinite ease-in-out;
}
</style>

Related Examples

Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

KULDEEP

1 year ago

2.5k
hero page
by salvator

Baraka Salvator

1 year ago

2.6k
L'art de coder
L'art de coderL'art de coder

Omer fils ELENGA

8 months ago

486
Perspective 3D
Perspective 3D

Omer fils ELENGA

11 months ago

778
Hero with video background

farisubuntu

2 years ago

2.4k
Hero

ariaw

1 year ago

824
Yoga Coach Hero Section

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

2 years ago

6.7k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

5 months ago

332
Clean hero section
Hero template with buttons

Laurits

3 years ago

16.1k
Clean hero section

OmKar Mehta

2 years ago

3.9k
Donate Hero section
Best New tailwindcss,help save the children

ORGIN_DREAMS

1 year ago

1.5k
Hero Banner
visually striking banner section It features pattern background with using SVG

Cosimo Fazio

2 years ago

7k