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

264

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 a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

2 years ago

20.3k
Pro Camera System
The Action Mode on iPhone 15 is a camera feature that provides extreme stabilization for shooting smooth, shake-free videos—ideal for fast movement or handheld filming. 🔍 Key Features: Super Stabilized Videos – Great for running, walking, or action shots. High Quality – Captures in up to 2.8K at 60fps while staying stable. Improved Low-Light Performance – Better than iPhone 14’s version. Automatic Adjustments – Detects motion and adapts accordingly.

Author:
ishimwe prince

9 months ago

933
flower
by salvator

Author:
Baraka Salvator

9 months ago

1.4k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

9 months ago

1.2k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

2k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.9k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.9k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

1 year ago

1.9k
Drinkware 2

Author:
Maxim

11 months ago

1k
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

Author:
KULDEEP

8 months ago

1.1k
Beautiful Hero Section

Author:
Brandon D

3 years ago

15.5k
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Author:
Ijila Itunu

2 months ago

294

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components