Home
Samuel Dawson
Hero with video background

Hero with video background

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

Hero

Author Samuel Dawson

16.3k

14

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

Author:
Anonymous

2 years ago

19.3k
Background image section

Author:
Charlotte Dupont

2 years ago

18.7k
No distraction search field

Author:
_Amar_

2 years ago

12k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

20.7k
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
Product Page
Showcase for the product.

Author:
Prem..

3 years ago

31.4k
Hero banner

Author:
Piet Vriend

2 years ago

16.4k
Beautiful Hero Section

Author:
Brandon D

3 years ago

14.8k
Hero block with image

Author:
Simon Scheffer

2 years ago

14.1k
Basic hero section

Author:
Lîmåã M

2 years ago

16.2k
Hero section with fancy heading

Author:
Laurits

3 years ago

11.9k
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

6.6k
Hero example simply beautiful

Author:
Lucas Martinez

2 years ago

13.7k
Hero Section

Author:
Gbenga Adegoke

2 years ago

9.8k
Clean hero section
Hero template with buttons

Author:
Laurits

2 years ago

14.9k
Hero section responsive

Author:
Samuel Dawson

2 years ago

14.9k
Typical SAAS hero section

Author:
Eamon Carter

2 years ago

9.1k
Hero component

Author:
Freja Jensen

2 years ago

12.7k

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