dreams

hero page by salvator

This tailwind example is contributed by Baraka Salvator, on 19-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Baraka Salvator

529

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neomorphic Future UI</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        neon: {
                            cyan: '#00f7ff',
                            pink: '#ff00f7',
                            purple: '#c400ff',
                        },
                        dark: {
                            950: '#0a0a0f',
                            900: '#121218',
                            800: '#1a1a22',
                        },
                    },
                    fontFamily: {
                        sans: ['"Space Grotesk"', 'sans-serif'],
                        mono: ['"Space Mono"', 'monospace'],
                    },
                    animation: {
                        'orbit': 'orbit 12s linear infinite',
                        'orbit-reverse': 'orbit 12s linear infinite reverse',
                        'pulse-slow': 'pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'text-gradient': 'text-gradient 8s ease infinite',
                        'float': 'float 8s ease-in-out infinite',
                    },
                    keyframes: {
                        orbit: {
                            '0%': { transform: 'rotate(0deg) translateX(80px) rotate(0deg)' },
                            '100%': { transform: 'rotate(360deg) translateX(80px) rotate(-360deg)' },
                        },
                        'text-gradient': {
                            '0%, 100%': {
                                'background-size': '200% 200%',
                                'background-position': 'left center'
                            },
                            '50%': {
                                'background-size': '200% 200%',
                                'background-position': 'right center'
                            }
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' },
                        }
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono&display=swap" rel="stylesheet">
    <style>
        .neu {
            border-radius: 20px;
            background: linear-gradient(145deg, #121218, #0f0f15);
            box-shadow:  8px 8px 16px #0a0a0f,
                        -8px -8px 16px #1a1a22;
        }
        
        .neu-inset {
            border-radius: 12px;
            background: linear-gradient(145deg, #0f0f15, #121218);
            box-shadow: inset 5px 5px 10px #0a0a0f,
                        inset -5px -5px 10px #1a1a22;
        }
        
        .glow {
            filter: drop-shadow(0 0 8px currentColor);
        }
        
        .gradient-border {
            position: relative;
            border-radius: 20px;
        }
        
        .gradient-border::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 22px;
            background: linear-gradient(45deg, #00f7ff, #ff00f7, #c400ff);
            background-size: 200% 200%;
            animation: text-gradient 4s ease infinite;
            z-index: -1;
        }
        
        .holographic {
            background: linear-gradient(135deg, 
                rgba(0, 247, 255, 0.1) 0%, 
                rgba(196, 0, 255, 0.1) 50%, 
                rgba(255, 0, 247, 0.1) 100%);
            position: relative;
            overflow: hidden;
        }
        
        .holographic::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0) 45%,
                rgba(255, 255, 255, 0.03) 50%,
                rgba(255, 255, 255, 0) 55%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(30deg);
            animation: shine 6s infinite;
        }
        
        @keyframes shine {
            0% { transform: rotate(30deg) translate(-30%, -30%); }
            100% { transform: rotate(30deg) translate(30%, 30%); }
        }
    </style>
</head>
<body class="min-h-screen bg-dark-950 text-gray-100 font-sans overflow-x-hidden">
    
    <div class="fixed inset-0 overflow-hidden pointer-events-none z-0 opacity-20">
        <div class="absolute inset-0 grid grid-cols-12 grid-rows-12 gap-px">
            <template x-for="i in 144" :key="i">
                <div class="bg-dark-800 hover:bg-neon-cyan transition-all duration-1000" 
                     @mousemove="document.querySelector(`.bg-cell-${i}`).classList.add('bg-neon-cyan'); setTimeout(() => document.querySelector(`.bg-cell-${i}`).classList.remove('bg-neon-cyan'), 1000)">
                </div>
            </template>
        </div>
    </div>

<nav class="relative z-50 py-6 px-6 md:px-12 lg:px-24 flex justify-between items-center">
        <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-xl neu flex items-center justify-center">
                <div class="w-6 h-6 rounded-lg bg-gradient-to-br from-neon-cyan to-neon-purple"></div>
            </div>
            <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-neon-cyan to-neon-purple">NOVA</span>
        </div>
        
        <div class="hidden md:flex items-center space-x-1">
            <button class="px-5 py-2 rounded-xl neu hover:neu-inset transition-all duration-300 text-sm font-medium group relative overflow-hidden">
                <span class="relative z-10">Products</span>
                <span class="absolute inset-0 bg-gradient-to-r from-neon-cyan/20 to-neon-purple/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </button>
            <button class="px-5 py-2 rounded-xl neu hover:neu-inset transition-all duration-300 text-sm font-medium group relative overflow-hidden">
                <span class="relative z-10">Solutions</span>
                <span class="absolute inset-0 bg-gradient-to-r from-neon-purple/20 to-neon-pink/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </button>
            <button class="px-5 py-2 rounded-xl neu hover:neu-inset transition-all duration-300 text-sm font-medium group relative overflow-hidden">
                <span class="relative z-10">Resources</span>
                <span class="absolute inset-0 bg-gradient-to-r from-neon-pink/20 to-neon-cyan/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </button>
        </div>
        
        <button class="px-6 py-2.5 rounded-xl gradient-border text-sm font-medium group">
            <div class="px-4 py-1.5 rounded-[18px] bg-dark-900 group-hover:bg-dark-800 transition-all duration-300">
                Get started
            </div>
        </button>
    </nav>

<main class="relative z-10 container mx-auto px-6 md:px-12 lg:px-24 py-20 md:py-32">
        <div class="flex flex-col lg:flex-row items-center justify-between gap-16">
            
            <div class="flex-1 max-w-2xl space-y-8">
                <div class="inline-block px-4 py-2 rounded-full bg-dark-800 border border-dark-700">
                    <div class="flex items-center space-x-2">
                        <div class="relative flex h-2 w-2">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-neon-cyan opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2 w-2 bg-neon-cyan"></span>
                        </div>
                        <span class="text-xs font-mono uppercase tracking-widest text-neon-cyan">Beta 2.0 Live</span>
                    </div>
                </div>
                
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-neon-cyan via-neon-purple to-neon-pink animate-text-gradient">
                        Reimagining
                    </span>
                    <br>
                    <span class="text-white">digital experiences</span>
                </h1>
                
                <p class="text-lg text-gray-400">
                    Our quantum-powered platform transforms how you interact with technology. 
                    Experience the future today with our neural interface technology.
                </p>
                
                <div class="flex flex-wrap gap-4 pt-6">
                    <button class="px-8 py-3.5 rounded-xl gradient-border font-medium group">
                        <div class="px-6 py-1.5 rounded-[18px] bg-dark-900 group-hover:bg-dark-800 transition-all duration-300 flex items-center">
                            <span>Explore demo</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-neon-cyan" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                            </svg>
                        </div>
                    </button>
                    
                    <button class="px-8 py-3.5 rounded-xl neu hover:neu-inset transition-all duration-300 font-medium flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-neon-pink" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
                        </svg>
                        Watch intro
                    </button>
                </div>
                
                <div class="flex items-center pt-12 space-x-6">
                    <div class="flex items-center space-x-3">
                        <div class="flex -space-x-3">
                            <div class="w-10 h-10 rounded-full neu-inset border-2 border-dark-800 flex items-center justify-center text-xs font-mono font-bold text-neon-cyan">AI</div>
                            <div class="w-10 h-10 rounded-full neu-inset border-2 border-dark-800 flex items-center justify-center text-xs font-mono font-bold text-neon-pink">QT</div>
                            <div class="w-10 h-10 rounded-full neu-inset border-2 border-dark-800 flex items-center justify-center text-xs font-mono font-bold text-neon-purple">ML</div>
                        </div>
                        <div class="text-sm text-gray-400">
                            <span class="font-medium text-gray-300">Powered by</span> cutting-edge tech
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="flex-1 max-w-xl relative">
                <div class="relative w-full aspect-[1/1.2] neu rounded-3xl overflow-hidden p-1">
                    <div class="h-full w-full rounded-2xl overflow-hidden relative holographic">
                        
                        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                            <div class="relative w-48 h-48">
                                
                                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-full bg-gradient-to-br from-neon-cyan to-neon-purple glow animate-pulse-slow"></div>
                                
                                
                                <div class="absolute top-0 left-0 w-8 h-8 rounded-full bg-gradient-to-br from-neon-pink to-neon-purple glow animate-orbit" style="animation-delay: -4s;"></div>
                                <div class="absolute top-0 left-0 w-8 h-8 rounded-full bg-gradient-to-br from-neon-cyan to-neon-pink glow animate-orbit-reverse" style="animation-delay: -8s;"></div>
                                <div class="absolute top-0 left-0 w-8 h-8 rounded-full bg-gradient-to-br from-neon-purple to-neon-cyan glow animate-orbit" style="animation-delay: -12s;"></div>
                            </div>
                        </div>
                        
                        
                        <div class="absolute top-1/4 left-1/4 w-24 h-24 rounded-xl neu-inset border border-dark-700/50 animate-float" style="animation-delay: 0.5s;"></div>
                        <div class="absolute bottom-1/4 right-1/4 w-20 h-20 rounded-xl neu-inset border border-dark-700/50 animate-float" style="animation-delay: 1s;"></div>
                        <div class="absolute bottom-1/3 right-1/3 w-16 h-16 rounded-xl neu-inset border border-dark-700/50 animate-float" style="animation-delay: 1.5s;"></div>
                        
                        
                        <svg class="absolute inset-0 w-full h-full" xmlns="http://www.w3.org/2000/svg">
                            <line x1="25%" y1="25%" x2="50%" y2="50%" stroke="url(#gradient)" stroke-width="1" stroke-dasharray="4 2" opacity="0.6" />
                            <line x1="75%" y1="25%" x2="50%" y2="50%" stroke="url(#gradient)" stroke-width="1" stroke-dasharray="4 2" opacity="0.6" />
                            <line x1="75%" y1="75%" x2="50%" y2="50%" stroke="url(#gradient)" stroke-width="1" stroke-dasharray="4 2" opacity="0.6" />
                            <line x1="25%" y1="75%" x2="50%" y2="50%" stroke="url(#gradient)" stroke-width="1" stroke-dasharray="4 2" opacity="0.6" />
                            <defs>
                                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                                    <stop offset="0%" stop-color="#00f7ff" />
                                    <stop offset="100%" stop-color="#ff00f7" />
                                </linearGradient>
                            </defs>
                        </svg>
                    </div>
                </div>
                
                
                <div class="absolute -bottom-6 -left-6 w-28 h-28 rounded-2xl neu border border-dark-700/30 p-1.5 z-10">
                    <div class="w-full h-full rounded-xl bg-dark-900/80 backdrop-blur-sm flex items-center justify-center">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-neon-cyan">42x</div>
                            <div class="text-xs font-mono text-gray-400">faster</div>
                        </div>
                    </div>
                </div>
                
                <div class="absolute -top-6 -right-6 w-24 h-24 rounded-2xl neu border border-dark-700/30 p-1.5 z-10">
                    <div class="w-full h-full rounded-xl bg-dark-900/80 backdrop-blur-sm flex items-center justify-center">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-neon-pink">99.9%</div>
                            <div class="text-xs font-mono text-gray-400">uptime</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

<div class="relative z-20 py-12 bg-dark-900/50 backdrop-blur-md border-t border-b border-dark-800 overflow-hidden">
        <div class="flex items-center space-x-16 animate-marquee whitespace-nowrap">
            <span class="text-xl font-mono text-neon-cyan">Quantum Computing</span>
            <span class="text-xl font-mono text-neon-pink">Neural Networks</span>
            <span class="text-xl font-mono text-neon-purple">Blockchain</span>
            <span class="text-xl font-mono text-neon-cyan">AI/ML</span>
            <span class="text-xl font-mono text-neon-pink">Web3</span>
            <span class="text-xl font-mono text-neon-purple">AR/VR</span>
            <span class="text-xl font-mono text-neon-cyan">IoT</span>
            <span class="text-xl font-mono text-neon-pink">5G</span>
            <span class="text-xl font-mono text-neon-purple">Edge Computing</span>
        </div>
        <style>
            .animate-marquee {
                animation: marquee 30s linear infinite;
            }
            @keyframes marquee {
                0% { transform: translateX(0); }
                100% { transform: translateX(-50%); }
            }
        </style>
    </div>

Related Examples

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

Author:
Cosimo Fazio

1 year ago

6.1k
Drinkware landing page

Author:
Maxim

6 months ago

1.1k
work hard
by salvator

Author:
Baraka Salvator

4 months ago

311
Hero section for website

Author:
Leon Bachmann

2 years ago

11.5k
Typical SAAS hero section

Author:
Eamon Carter

2 years ago

9.1k
A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

8 months ago

1.2k
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

4 months ago

616
SHOES SHOP
all categories of shoes like women ,men ,and children

Author:
ineza aime stella

4 months ago

411
Hero Beer

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

1 year ago

4.5k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.5k
Slide
A slide component which could be used as hero section or in a slideshow

Author:
farid

10 months ago

1.4k
login_form
used for user to logging in

Author:
nii fanny

4 months ago

437

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components