template hero

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 24-Dec-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Front page

Hero Navbar Landing Page

Author Raul antonio de la cruz hernandez

Tailwind v3.4 478 4

Fork Fullscreen

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Velix Clone - Background Fix</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>

<header class="relative z-20 flex justify-between items-start w-full">
                <div class="text-2xl font-bold tracking-tighter">VELIX.®</div>
                
                <nav class="hidden md:flex flex-col text-right gap-2 text-sm font-light text-gray-200">
                    <a href="#" class="hover:text-white transition">About</a>
                    <a href="#" class="hover:text-white transition">Projects</a>
                    <a href="#" class="hover:text-white transition">Blog</a>
                    <a href="#" class="hover:text-white transition">Contact</a>
                </nav>
            </header>

<div class="relative z-10 mt-auto w-full grid grid-cols-1 lg:grid-cols-2 gap-8 items-end">
                
                <div class="flex flex-col gap-2">
                    <span class="text-lg font-medium opacity-80">©2025</span>
                    <h1 class="text-6xl lg:text-8xl font-extrabold leading-[0.9] tracking-tight">
                        DESIGN FOR<br>
                        EXPERIENCES*
                    </h1>
                </div>

<div class="flex flex-col items-end w-full">
                    <div class="w-full flex justify-between items-end">
                        <p class="text-xs text-gray-300 max-w-[250px] leading-relaxed hidden md:block">
                            Your product should captivate hearts and minds. I shape identities that engage, inspire, and grow your brand.
                        </p>
                        
                        <button class="flex items-center gap-2 bg-white text-black px-6 py-3 rounded-full text-sm font-bold hover:bg-gray-200 transition group">
                            Let's Talk
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4 group-hover:translate-x-1 transition">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
            
        </section>

<section class="bg-neutral-50 p-8 lg:p-16 relative z-10">
            
            <div class="flex flex-col lg:flex-row justify-between items-start gap-12 mb-20">
                <div class="mt-4">
                    <button class="flex items-center gap-3 bg-[#2a2a2a] text-white pl-1 pr-6 py-1 rounded-full text-xs font-medium hover:bg-black transition">
                        <span class="bg-[#3a3a3a] p-2 rounded-full">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                            </svg>
                        </span>
                        More About Me
                    </button>
                </div>

<div class="max-w-xl text-right lg:text-right text-gray-800 relative">
                    <div class="absolute -top-6 right-1/2 text-2xl">✦</div>
                    <h2 class="text-2xl md:text-3xl font-medium leading-tight">
                        Hey👋, I'm a digital designer in los angeles, bringing digital experiences to life with striking visuals, expressive motion, and effortless interaction.
                    </h2>
                    <div class="absolute -bottom-8 right-10 text-xl">✦</div>
                </div>
            </div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-8 pt-8 border-t border-gray-200">
                <div class="flex flex-col gap-2">
                    <span class="text-5xl font-bold text-gray-900">21+</span>
                    <h3 class="font-bold text-gray-800 mt-2">Website launched</h3>
                    <p class="text-xs text-gray-500 leading-relaxed">Helping brands elevate their online presence confidently.</p>
                </div>
                <div class="flex flex-col gap-2">
                    <span class="text-5xl font-bold text-gray-900">2M+</span>
                    <h3 class="font-bold text-gray-800 mt-2">Users engaged</h3>
                    <p class="text-xs text-gray-500 leading-relaxed">Our designs connect and inspire millions worldwide.</p>
                </div>
                <div class="flex flex-col gap-2">
                    <span class="text-5xl font-bold text-gray-900">99%</span>
                    <h3 class="font-bold text-gray-800 mt-2">Client satisfaction rate</h3>
                    <p class="text-xs text-gray-500 leading-relaxed">We build relationships that thrive on trust and creativity.</p>
                </div>
                <div class="flex flex-col gap-2">
                    <span class="text-5xl font-bold text-gray-900">12+</span>
                    <h3 class="font-bold text-gray-800 mt-2">Years of experience</h3>
                    <p class="text-xs text-gray-500 leading-relaxed">Decades of crafting innovative solutions for leading brands.</p>
                </div>
            </div>

</section>
    </main>

</body>
</html>

Related Examples

A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Hero

Aman kumar

2 years ago

7.7k
Hero w/ navbar
the modern and clean hero section

Carla Hoffman

2 years ago

5.9k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.4k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

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

Sahil Sasapara

2 years ago

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

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.7k
Hero Beer

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

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

Akram Khan

2 years ago

3.5k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

1 year ago

2.7k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Coastal UI

1 year ago

2.4k