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

hero template
hero section

Raul antonio de la cruz hernandez

9 months ago

511
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

SHARIFUL ISLAM

1 year ago

2.4k
modern portifolio
by salvator

Baraka Salvator

1 year ago

1.2k
A hero component
It has a gradient background, a large title with a creative emphasis, and a call-to-action button.

Vikram Choudhary

3 years ago

10k
Header + simple Hero Section

ABDO-SY

1 year ago

2.9k
Hero

ariaw

1 year ago

824
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

gidy

11 months ago

1.2k
Hero section responsive

Samuel Dawson

3 years ago

15.8k
Banner - Hero - Splash Section

ABDO-SY

1 year ago

1.9k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.3k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

AKASH GANDHAR

2 years ago

5.4k
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?

Vernon Francis

2 years ago

2.6k