section footer

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

Hero

Author Raul antonio de la cruz hernandez

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

Welcome to Cinema
The design captures the magic and glamour of cinema with a modern, interactive interface that would definitely make users stop scrolling and say "whoa!" The color scheme uses cinematic blacks and golds with vibrant accent colors, while the animations bring the interface to life without overwhelming the content

Author:
Augustin

6 months ago

559
Heade With Hero Section

Author:
Abdul Baset Bappy

6 months ago

1.1k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

8.4k
Hero with description

Author:
Laurits

2 years ago

9.4k
Creative Hero Section

Author:
Ijila Itunu

7 months ago

1.3k
Header + simple Hero Section

Author:
ABDO-SY

10 months ago

1.9k
Animated Hero Slider, different images for mobile
A hero with 2 images alternating each other every 7 seconds, zoom on scroll

Author:
Gianluca Secondo

10 months ago

1.3k
Hero with button

Author:
Laurits

2 years ago

10.9k
hero section

Author:
Omer fils ELENGA

1 month ago

20
Hero banner

Author:
Piet Vriend

3 years ago

16.6k
A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

11 months ago

1.3k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

7 months ago

580

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components