Home
farisubuntu
Hero with video background

Hero with video background

Forked from> @samuel33/hero-with-video-background

This tailwind example is contributed by farisubuntu, on 02-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author farisubuntu

727

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">Chinook Digital Media</h1>
        <h3 class="font-light text-3xl my-6">As streaming, social, and gaming converge, companies should
                consider comprehensive strategies to define media and
                entertainment's future—or they could risk living in someone
                else’s vision.</h3>
    </div>
</section>

.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

Typical SAAS hero section

Author:
Eamon Carter

1 year ago

7.8k
3D Animated Image Gallery
3D Animated Image Gallery

Author:
Samuel Abera

9 months ago

5.6k
Hero section
Hero section for your project

Author:
Prajwal Hallale

2 years ago

8.7k
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

10 months ago

3.1k
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

6 months ago

1.1k
Hero

Author:
Hasan AlDoy (McDoy)

3 days ago

32
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

8 months ago

2.9k
Hero section with bold heading

Author:
Abigail

1 year ago

10.6k
Modern SAAS Hero Section
A 2-column responsive hero section for modern SAAS APP

Author:
Emdadul Islam

7 months ago

2.6k
Hero with button

Author:
Laurits

1 year ago

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

Author:
Junclarkaizen Pagu

1 year ago

9.8k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

1 year ago

8.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components