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

924

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

Magic Sound
by salvator

Author:
Baraka Salvator

7 months ago

977
App Hero Section

Author:
Abdul Baset Bappy

6 months ago

712
flower
by salvator

Author:
Baraka Salvator

7 months ago

1.1k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

8.7k
App Hero Section With header

Author:
Abdul Baset Bappy

6 months ago

957
landi page template

Author:
Raul antonio de la cruz hernandez

2 weeks ago

80
Food App Web design

Author:
Aitrik Saha

10 months ago

1.7k
Responsive hero section

Author:
Amit Pachange

2 years ago

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

Author:
farid

1 year ago

1.8k
Hero with SVG background
It has a nice 'Sign Up with Google' CTA button

Author:
Santiago Hernandez

1 year ago

2.3k
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

8 months ago

677
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:
zobaidul kaziex

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components