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

Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
Vernon Francis

1 year ago

2k
Creative Hero Section

Author:
Ijila Itunu

6 months ago

1.1k
Modern SAAS Hero Section
A 2-column responsive hero section for modern SAAS APP

Author:
Emdadul Islam

1 year ago

4.8k
Simple hero example

Author:
Task Master

3 years ago

11k
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

3 years ago

13.6k
Hero section in react js
hero portfolio section in react js

Author:
SAI BENDE

1 year ago

5.1k
animated hero

Author:
Crimson

10 months ago

2.8k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9.1k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.6k
Login_Form
help to logging in

Author:
ineza aime stella

6 months ago

511
heroimage
svg and hero image, basic html code

Author:
Anonymous

5 months ago

419
Hero section with image

Author:
Sophia Baker

2 years ago

12.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components