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

907

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

Header + simple Hero Section

Author:
ABDO-SY

10 months ago

1.9k
template hero

Author:
Raul antonio de la cruz hernandez

2 days ago

32
Hero template

Author:
Leon Bachmann

3 years ago

13.6k
No distraction search field

Author:
_Amar_

2 years ago

12.1k
Hero section with button

Author:
Samuel Dawson

2 years ago

12.7k
portifolio
skills

Author:
ishimwe prince

7 months ago

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

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

1 year ago

8.4k
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
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

1.8k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

330
Hero section

Author:
iamlos

9 months ago

1.4k
Landing page

Author:
Maxim

9 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components