Home
Piet Vriend
Hero section with youtube video preview

Hero section with youtube video preview

This tailwind example is contributed by Piet Vriend, on 10-Apr-2023. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Piet Vriend

11.1k

Fork Fullscreen

<div class="h-screen w-screen bg-black">
    <div class="mx-auto max-w-7xl pt-16 sm:pt-24">
        <div class="space-y-8 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-8">
            <div class="px-6 sm:text-center md:mx-auto md:max-w-2xl lg:col-span-6 lg:flex lg:items-center lg:text-left">
                <div class="space-y-8">
                    <div class="space-y-4">
                        <div class="space-y-2">
                            <span
                                class="rounded-full uppercase bg-pink-500 px-3 py-0.5 text-sm font-semibold leading-5 text-white">
                                Early Access
                            </span>
                            <h1 class="text-4xl font-bold tracking-tight text-white sm:text-5xl md:text-6xl">
                                <span class="sm:text-6xl">
                                </span> Wireless Bluetooth Earbuds
                                <span
                                    class="font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-pink-600">StellarGlo
                                </span>
                                <br>
                                go beyond sound.
                            </h1>
                        </div>

<p class="text-base text-gray-200 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
                            Immerse yourself in superior audio quality with the StellarGlo Wireless Bluetooth Earbuds.
                            These sleek and lightweight earbuds deliver crystal-clear sound and rich bass.
                        </p>

</div>

</div>

</div>
                        <div class="h-4 border-l border-gray-700"></div>
                        <a href="" target="_blank">
                            <img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1&theme=light" class="w-32 h-8 md:w-48 md:h-12 lg:w-64 lg:h-16" width="250" height="54">
                        </a>
                    </div>
                </div>
            </div>

</div>
    </div>
</div>

Related Examples

A Fullscreen Hero Section

Author:
Brandon D

2 years ago

18.4k
Clean hero section
Hero template with buttons

Author:
Laurits

2 years ago

14.1k
Responsive hero section

Author:
Amit Pachange

2 years ago

13.9k
Hero example simply beautiful

Author:
Lucas Martinez

2 years ago

12.7k
Hero template

Author:
Leon Bachmann

2 years ago

12k
Typical SAAS hero section

Author:
Eamon Carter

1 year ago

8.4k
Simple hero example

Author:
Task Master

2 years ago

10k
Beautiful Hero Section

Author:
Brandon D

2 years ago

13.8k
Hero with video background

Author:
Samuel Dawson

2 years ago

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

Author:
farid

4 months ago

923
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

2 months ago

191
Minimalistic hero section

Author:
Sophia Baker

2 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components