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 v3.4. It is responsive.

Hero

Author farisubuntu

Tailwind v3.4 2.4k 10

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

Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

4 months ago

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

Anonymous

3 years ago

21.1k
hero template

Raul antonio de la cruz hernandez

8 months ago

500
Hero Section

Amine Ghanim

1 year ago

2.7k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

1 year ago

2.8k
Simple hero example

Task Master

3 years ago

11.6k
Very simple hero

Laurits

3 years ago

9.7k
HERO

ABDO-SY

1 year ago

1.3k
chair
by salvator

Baraka Salvator

1 year ago

1.5k
Hero section with sample code
Show sample code of your digital product

Dipti narayan

3 years ago

10.5k
Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

ABDO-SY

1 year ago

3.6k
Drinkware 2

Maxim

1 year ago

1.5k