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

7.1k

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

2 years ago

20.4k
Background image section

Author:
Charlotte Dupont

3 years ago

19.4k
Typical SAAS hero section

Author:
Eamon Carter

2 years ago

9.4k
Hero with video background

Author:
Samuel Dawson

3 years ago

17.2k
hero section

Author:
Anonymous

2 years ago

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

Author:
Cosimo Fazio

2 years ago

6.7k
Background image section

Author:
Marc

2 years ago

6.7k
hero modern
hero modern

Author:
Omer fils ELENGA

2 months ago

355
Heade With Hero Section

Author:
Abdul Baset Bappy

9 months ago

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

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

1 year ago

5.7k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

10 months ago

2k
Magic Sound
by salvator

Author:
Baraka Salvator

10 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components