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

266

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 with big heading

Author:
Leon Bachmann

3 years ago

12k
Hero section with fancy heading

Author:
Laurits

3 years ago

12.2k
Game changer
by salvator

Author:
Baraka Salvator

9 months ago

1.1k
Minimalistic Hero Section with Radial Gradient for E-Commerce
This hero section features a modern radial gradient background where the center remains white and fades into a soft blue at the edges. Designed for an e-commerce website, it provides a clean, elegant, and visually appealing layout with a bold headline, a call-to-action button, and a seamless user experience. The responsive design ensures a great appearance on all screen sizes.

Author:
SHARIFUL ISLAM

1 year ago

1.7k
home
html , css

Author:
Hacker Development

10 months ago

1.9k
Hero simple
hero design simple

Author:
QQ-VVN

10 months ago

1.4k
Garden
by salvator

Author:
Baraka Salvator

9 months ago

1.2k
Hero section

Author:
Mohit Prajapati

3 years ago

12.4k
Hero Section
Created a good and responsive web Hero Page

Author:
Ravi.Kumar Kumar

1 year ago

2.7k
Magic Sound
by salvator

Author:
Baraka Salvator

9 months ago

1.1k
Heade With Hero Section

Author:
Abdul Baset Bappy

8 months ago

1.4k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

9 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components