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

12.4k

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

15.3k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

21.8k
Responsive hero section

Author:
Amit Pachange

3 years ago

16.1k
Hero template

Author:
Leon Bachmann

3 years ago

13.6k
Hero example simply beautiful

Author:
Lucas Martinez

2 years ago

14.6k
Typical SAAS hero section

Author:
Eamon Carter

2 years ago

9.2k
Simple hero example

Author:
Task Master

3 years ago

11k
Beautiful Hero Section

Author:
Brandon D

3 years ago

15.4k
Hero with video background

Author:
Samuel Dawson

3 years ago

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

Author:
Sahil Sasapara

1 year ago

4.8k
Header + simple Hero Section

Author:
ABDO-SY

11 months ago

2.1k
Hero

Author:
ABDO-SY

11 months ago

1.8k

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

© 2026 TailwindFlex. All Rights Reserved.

v1.12