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

955

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

Summer Collection 2025
Summer Collection 2025

Author:
matoleo chance

8 months ago

624
App Hero Section

Author:
Abdul Baset Bappy

7 months ago

874
Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

Author:
ABDO-SY

1 year ago

2.9k
Drinkware 2

Author:
Maxim

11 months ago

994
Hero with video background

Author:
Samuel Dawson

3 years ago

16.9k
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.1k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

2 years ago

10.8k
Login_Form
help to logging in

Author:
ineza aime stella

8 months ago

605
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

3.1k
card section neon
card section neon

Author:
Omer fils ELENGA

2 weeks ago

149
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

1 year ago

5.4k
MovieTrade
"About Us" section you can add to your movie trading website, designed in Tailwind CSS. This section explains your platform’s mission, features, and team (if applicable).

Author:
INGRIDE MUZIRANENGE

8 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components