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.8k

14

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

Author:
Laurits

2 years ago

14.9k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

20.8k
Responsive hero section

Author:
Amit Pachange

2 years ago

15.1k
Hero template

Author:
Leon Bachmann

2 years ago

13.2k
Hero example simply beautiful

Author:
Lucas Martinez

2 years ago

13.9k
Typical SAAS hero section

Author:
Eamon Carter

2 years ago

9.1k
Simple hero example

Author:
Task Master

2 years ago

10.9k
Beautiful Hero Section

Author:
Brandon D

3 years ago

14.9k
Hero with video background

Author:
Samuel Dawson

2 years ago

16.4k
Hero section responsive

Author:
Samuel Dawson

2 years ago

15k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.5k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12