Home
Rameez Rami
Home banner video background

Home banner video background

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

This tailwind example is contributed by Rameez Rami, on 08-Dec-2023. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Rameez Rami

6.3k

Fork Fullscreen

bayay banner test
<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>

.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

1 year ago

18k
Background image section

Author:
Charlotte Dupont

2 years ago

17.7k
Typical SAAS hero section

Author:
Eamon Carter

1 year ago

8.7k
Hero with video background

Author:
Samuel Dawson

2 years ago

15.5k
hero section

Author:
Anonymous

1 year ago

9.1k
Hero Banner
visually striking banner section It features pattern background with using SVG

Author:
Cosimo Fazio

1 year ago

5.7k
Background image section

Author:
Marc

1 year ago

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

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.4k
Product Page
Showcase for the product.

Author:
muhamadrofii911

10 months ago

1.8k
opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

4 weeks ago

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

Author:
SHARIFUL ISLAM

4 months ago

934
portifolio
skills

Author:
ishimwe prince

1 month ago

33

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components