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

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

animated hero

Author:
Crimson

2 months ago

1.1k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
Vernon Francis

7 months ago

1.3k
Standard Hero

Author:
Anonymous

1 year ago

2.9k
composent section presentation société
composent section presentation société

Author:
Omer fils ELENGA

7 months ago

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

Author:
ABDO-SY

1 month ago

807
Slide
A slide component which could be used as hero section or in a slideshow

Author:
farid

4 months ago

806
Hero Section
Home hero section search bar

Author:
Samuel Abera

1 year ago

6k
Hero (with dark mode)
Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

Author:
Maxim

3 months ago

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

Author:
Coastal UI

4 months ago

1k
Responsive hero section

Author:
Amit Pachange

2 years ago

13.8k
Hero

Author:
Hasan AlDoy (McDoy)

2 months ago

790
Hero section responsive

Author:
Samuel Dawson

2 years ago

13.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components