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

636

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

Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

Author:
Coastal UI

11 months ago

2.2k
Magic Sound
by salvator

Author:
Baraka Salvator

5 months ago

691
Rwandan farmers with Canadian markets through sustainable, fair trade practices.
Key Features of This Website: Professional Design: Clean, modern interface with orange/green color scheme representing mangoes and agriculture Fully responsive layout that works on all devices Comprehensive Sections: Hero section highlighting the Rwanda-Canada mango trade Product showcase with different mango varieties Current market pricing table Detailed farm-to-table process explanation Company information and impact metrics Testimonials from partners Contact form and information Trade-Specific Content: Focus on Rwandan mango varieties suitable for Canadian markets Pricing in both USD and kg units common in agricultural trade Information about certifications and compliance Shipping and logistics details User Experience: Clear calls-to-action for quotes and orders Easy navigation between sections Newsletter signup for market updates Contact information prominently displayed Trust Elements: Certifications and compliance badges Impact statistics showing benefits to Rwandan farmers Testimonials from Canadian partners

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

567
Home
html , css

Author:
Hacker Development

5 months ago

396
Hero section with sample code
Show sample code of your digital product

Author:
Dipti narayan

2 years ago

10.1k
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2k
Managing Finance Hero
Create a modern and responsive Hero Section using TailwindCSS. This section features a bold headline, a subheading, and a call-to-action button, designed to grab user attention instantly. With a clean layout, engaging typography, and a visually appealing background, this hero section enhances the first impression of your website. Ideal for landing pages, e-commerce, and SaaS platforms, it ensures a seamless experience across all devices.

Author:
SHARIFUL ISLAM

8 months ago

863
Minimalistic hero section

Author:
Sophia Baker

2 years ago

11.4k
Landing page hero section UI
Modern Hero Section Design

Author:
UI-Templates

3 weeks ago

144
Hero example simply beautiful

Author:
Lucas Martinez

2 years ago

14k
Product Page
Showcase for the product.

Author:
Prem..

3 years ago

31.7k
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Author:
Vikas Kushwah

7 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components