Hero with video background

This tailwind example is contributed by Samuel Dawson, on 29-Nov-2022. Component is made with Tailwind v3.4. It is responsive.

Hero

Author Samuel Dawson

Tailwind v3.4 17.8k 20

Fork Fullscreen

<section class="relative h-screen flex flex-col items-center justify-center text-center text-white ">
    <div class="video-docker absolute top-0 left-0 w-full h-full overflow-hidden">
        <video class="min-w-full min-h-full absolute object-cover"
            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
            type="video/mp4" autoplay muted loop></video>
    </div>
    <div class="video-content space-y-2 z-10">
        <h1 class="font-light text-6xl">full Hero Video</h1>
        <h3 class="font-light text-3xl">with TailwindCSS</h3>
    </div>
</section>

<style>
    .video-docker video {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.video-docker::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1;
    }
</style>

Related Examples

Hero section with a gradient background
With text overlay, and a call-to-action button

Anonymous

3 years ago

21.1k
Background image section

Charlotte Dupont

3 years ago

20.1k
No distraction search field

_Amar_

3 years ago

12.5k
A Fullscreen Hero Section

Brandon D

4 years ago

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

Junclarkaizen Pagu

3 years ago

12.2k
Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
Hero banner

Piet Vriend

3 years ago

17.9k
Beautiful Hero Section

Brandon D

4 years ago

16.1k
Hero block with image

Simon Scheffer

3 years ago

15.8k
Basic hero section

Lîmåã M

3 years ago

17.4k
Hero section with fancy heading

Laurits

3 years ago

12.7k
Home banner video background
Home banner video background

Rameez Rami

2 years ago

7.8k
Hero example simply beautiful

Lucas Martinez

3 years ago

15.3k
Hero Section

Gbenga Adegoke

3 years ago

10.3k
Clean hero section
Hero template with buttons

Laurits

3 years ago

16.1k
Hero section responsive

Samuel Dawson

3 years ago

15.8k
Typical SAAS hero section

Eamon Carter

3 years ago

9.7k
Hero component

Freja Jensen

3 years ago

13.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.