Hero section with youtube video preview

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

Hero

Author Piet Vriend

Tailwind v3.4 13k 15

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 class="border-t border-gray-700"></div>

<div class="flex space-x-4 items-center text-white">
                        <div class="flex items-center space-x-2">
                            <div class="flex flex-shrink-0 -space-x-1">
                                <img loading="lazy" width="400" height="400" decoding="async"
                                    class="h-6 w-6 max-w-none rounded-full ring-2 ring-white"
                                    style="color:transparent" src="https://randomuser.me/api/portraits/men/29.jpg">
                                <img loading="lazy" width="400" height="400" decoding="async"
                                    class="h-6 w-6 max-w-none rounded-full ring-2 ring-white"
                                    style="color:transparent" src="https://randomuser.me/api/portraits/men/90.jpg">
                                <img loading="lazy" width="100" height="100" decoding="async"
                                    class="h-6 w-6 max-w-none rounded-full ring-2 ring-white"
                                    style="color:transparent" src="https://randomuser.me/api/portraits/men/75.jpg">
                                <img loading="lazy" width="200" height="200" decoding="async"
                                    class="h-6 w-6 max-w-none rounded-full ring-2 ring-white"
                                    style="color:transparent" src="https://randomuser.me/api/portraits/men/5.jpg">
                            </div>

<span class="flex-shrink-0 text-xs font-medium leading-5">+15</span>

</div>

<div class="h-4 border-l border-gray-700"></div>

<div class="flex items-center">

<svg class="h-4 w-4 fill-current text-yellow-500" viewBox="0 0 24 24">
                                <path
                                    d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z">
                                </path>
                            </svg>
                            <svg class="h-4 w-4 fill-current text-yellow-500" viewBox="0 0 24 24">
                                <path
                                    d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z">
                                </path>
                            </svg>
                            <svg class="h-4 w-4 fill-current text-yellow-500" viewBox="0 0 24 24">
                                <path
                                    d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z">
                                </path>
                            </svg>
                            <svg class="h-4 w-4 fill-current text-yellow-500" viewBox="0 0 24 24">
                                <path
                                    d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z">
                                </path>
                            </svg>
                            <svg class="h-4 w-4 fill-current text-yellow-500" viewBox="0 0 24 24">
                                <path
                                    d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z">
                                </path>
                            </svg>

</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 class="flex items-center w-full col-span-6">
                <div class="px-6 h-96 lg:h-100% w-full max-w-2xl col-span-6 flex items-center mx-auto">
                    <div style="width: 100%; height: 100%;">
                        <div style="width: 100%; height: 100%;">
                            <iframe frameborder="0" allowfullscreen="1"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                width="100%" height="100%"
                                src="https://www.youtube.com/embed/mr15Xzb1Ook?autoplay=0&amp;mute=0&amp;controls=0&"
                                id="widget2">
                            </iframe>
                        </div>
                    </div>
                </div>
            </div>

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

Related Examples

Clean hero section
Hero template with buttons

Laurits

3 years ago

16.1k
A Fullscreen Hero Section

Brandon D

4 years ago

23.4k
Responsive hero section

Amit Pachange

3 years ago

17.1k
Hero template

Leon Bachmann

3 years ago

14.6k
Hero example simply beautiful

Lucas Martinez

3 years ago

15.4k
Typical SAAS hero section

Eamon Carter

3 years ago

9.7k
Simple hero example

Task Master

3 years ago

11.6k
Beautiful Hero Section

Brandon D

4 years ago

16.2k
Hero with video background

Samuel Dawson

3 years ago

17.9k
Background image section

Marc

2 years ago

7.4k
A Fullscreen Hero Section

Hasan AlDoy (McDoy)

1 year ago

2k
Portfolio Hero Section 4

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

1 year ago

5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.