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

10.7k

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

17.2k
Clean hero section
Hero template with buttons

Author:
Laurits

1 year ago

13.7k
Responsive hero section

Author:
Amit Pachange

2 years ago

13.2k
Hero example simply beautiful

Author:
Lucas Martinez

1 year ago

12.1k
Hero template

Author:
Leon Bachmann

2 years ago

11.4k
Typical SAAS hero section

Author:
Eamon Carter

1 year ago

8.1k
Simple hero example

Author:
Task Master

2 years ago

9.9k
Beautiful Hero Section

Author:
Brandon D

2 years ago

13.2k
Hero with video background

Author:
Samuel Dawson

2 years ago

14k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

3 weeks ago

436
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

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

Author:
Samuel Abera

8 months ago

5.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components