Modern streaming platforms like Netflix, Disney+, and Amazon Prime share a common design language: bold hero banners, horizontal movie rows, dark themes, and smooth hover interactions. In this tutorial, you’ll learn how to recreate a Netflix-style homepage using Tailwind CSS — all with clean, reusable HTML components and fully responsive layouts.

We’ll start by setting up Tailwind CSS, then build the page step by step: a fullscreen hero section with background imagery, a navigation bar, movie rows with horizontal scrolling, and elegant hover effects. By the end of this tutorial, you’ll have a polished landing page layout that can be used for streaming apps, media libraries, or any modern web project.

Whether you’re a beginner experimenting with Tailwind or an experienced developer looking to create a fast, responsive UI, this guide will walk you through each part with clear explanations and code samples.

Prerequisites

Before we start building the Netflix-style homepage, make sure you’re familiar with the following tools and concepts:

Basic Knowledge Requirements

HTML & CSS – You should understand essential HTML structure and basic styling concepts.
Tailwind CSS fundamentals – Knowing how utility classes work will help you move faster.

Tools You’ll Need

Node.js and npm are installed on your machine (for running Tailwind CSS in a real build workflow).
You can check your versions with:
```
 
```
```
node -v
npm -v
```
A code editor such as VS Code, WebStorm, or Sublime Text.
A modern browser for previewing the UI.

Optional (But Recommended)

Tailwind CSS IntelliSense extension for VS Code
Helps with class name autocomplete and design previews.

If you’re completely new to Tailwind, don’t worry — we’ll go through the full setup process before writing the page UI.

Project Setup

In this section, we’ll create a new project folder and set up Tailwind CSS using the official CLI. This gives you full control over styling and ensures optimal file size for production.

1. Create the Project Folder

Start by creating a new folder for your Netflix-style homepage:

mkdir tailwind-netflix-homepage
cd tailwind-netflix-homepage

Inside this folder, initialize npm:

npm init -y

2. Install Tailwind CSS

Next, install Tailwind CSS and Tailwind CLI:

npm install tailwindcss @tailwindcss/cli

Create src/input.css.

@import "tailwindcss";

Run the CLI tool to scan your source files for classes and build your CSS.

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

Add your compiled CSS file to the <head> project and start using Tailwind’s utility classes to style your content.

Basic Layout Structure

With Tailwind CSS successfully installed and compiled, we can begin laying out the foundation of our Netflix-style homepage. In this section, you’ll create the main HTML structure, set up global styling, and prepare reusable containers that will support the hero section and movie rows later on.

1. HTML Boilerplate

Open your index.html file and replace its content with a clean base structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Netflix Style Homepage with Tailwind CSS</title>
    <link rel="stylesheet" href="./output.css" />
  </head>
  <body class="bg-black text-white font-sans">
    <!-- Navbar -->
    <header
      class="fixed top-0 w-full z-50 bg-gradient-to-b from-black/80 to-transparent"
    >
      <div
        class="max-w-7xl mx-auto flex items-center justify-between px-6 py-4"
      >
        <h1 class="text-2xl font-bold">NETFLIX</h1>

        <nav class="hidden md:flex gap-6">
          <a href="#" class="hover:text-gray-300">Home</a>
          <a href="#" class="hover:text-gray-300">TV Shows</a>
          <a href="#" class="hover:text-gray-300">Movies</a>
          <a href="#" class="hover:text-gray-300">Latest</a>
          <a href="#" class="hover:text-gray-300">My List</a>
        </nav>
      </div>
    </header>

    <!-- Main Content Wrapper -->
    <main class="pt-20">
      <!-- Hero Section placeholder -->
      <section class="h-[80vh] bg-gray-800 flex items-center justify-center">
        <p class="text-xl">Hero Section Coming Soon...</p>
      </section>

      <!-- Movie Rows placeholder -->
      <section class="py-10">
        <div class="max-w-7xl mx-auto px-6">
          <h2 class="text-2xl font-semibold mb-4">Popular on Netflix</h2>
          <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <div class="bg-gray-700 h-40 rounded-md"></div>
            <div class="bg-gray-700 h-40 rounded-md"></div>
            <div class="bg-gray-700 h-40 rounded-md"></div>
            <div class="bg-gray-700 h-40 rounded-md"></div>
            <div class="bg-gray-700 h-40 rounded-md"></div>
            <div class="bg-gray-700 h-40 rounded-md"></div>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>

2. Understanding the Layout

Fixed Navigation Bar

Netflix uses a dark, semi-transparent top navbar.
We replicate this with:

fixed top-0 w-full z-50 for positioning
bg-gradient-to-b from-black/80 to-transparent for the fade effect
Responsive nav links (hidden on mobile, shown on larger screens)

Main Wrapper with Padding

We add pt-20 to push the main content below the fixed header.

Placeholder Sections

You’ll replace these placeholders in later sections:

A hero section that will become a full-screen movie banner
Movie rows that will become horizontally scrollable lists

The placeholders help you visualize the final layout early without needing the completed components.

3. Working Responsively from the Start

Tailwind automatically enables mobile-first styling, so we structure our layout with:

Mobile defaults, keeping things simple
md:, lg: breakpoints to scale up
Larger grids for desktop screens
Hidden nav for mobile (hidden md:flex)

This approach ensures everything scales nicely across phones, tablets, and large displays — exactly the kind of responsiveness a Netflix-style UI demands.

Create the Hero Section

The hero section is one of the most recognizable parts of Netflix’s UI. It features a full-screen background image, dark gradient overlays, bold typography, and clear call-to-action buttons. In this section, you’ll build a responsive hero banner that captures that same cinematic feel.

1. Replace the Hero Placeholder

Open index.html and replace the placeholder hero section with the following Tailwind-powered layout:

<!-- Hero Section -->
<section
  class="relative h-[85vh] w-full bg-cover bg-center bg-no-repeat"
  style="background-image: url('https://image.tmdb.org/t/p/original/9ZlGiEjji2LNPSYyVZOGwoT9S5.jpg');"
>
  <!-- Dark Gradient Overlay -->
  <div class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent"></div>

  <!-- Hero Content -->
  <div class="relative z-10 max-w-7xl mx-auto h-full flex flex-col justify-center px-6">
    <h2 class="text-4xl md:text-6xl font-extrabold max-w-xl leading-tight">
      The Witcher: Season 3
    </h2>

    <p class="mt-4 max-w-md text-gray-300">
      Monsters, magic, and destiny collide in this action-packed fantasy series.
      Follow Geralt as he navigates a world full of danger and betrayal.
    </p>

    <div class="mt-6 flex gap-4">
      <button class="bg-white text-black px-6 py-3 rounded-md font-semibold hover:bg-gray-300 transition">
        ▶ Play
      </button>
      <button class="bg-gray-700/60 px-6 py-3 rounded-md font-semibold hover:bg-gray-600 transition">
        ℹ More Info
      </button>
    </div>
  </div>
</section>

2. How It Works

Fullscreen Background Image

We’re using:

relative h-[85vh] to create a tall, cinematic hero area
bg-cover bg-center bg-no-repeat for responsive image scaling

You can replace the background image URL with any promotional banner or static file.

Dark Gradient Overlay

Netflix uses strong dark gradients behind text to improve readability.

We create the overlay with:

<div class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent"></div>

This gradient:

Starts fully black at the bottom
Blends to 40% opacity in the middle
Fades to transparent at the top

Perfect for making white text pop without losing the image detail.

Hero Text & Buttons

The hero content is wrapped in:

<div class="relative z-10 max-w-7xl mx-auto h-full flex flex-col justify-center px-6">

This ensures:

Content is centered vertically
Stays readable on ultra-wide screens
Remains inside a max-width container

Buttons follow Netflix’s simple style:

White "Play" button
Dark translucent "More Info" button
Smooth hover transitions for interactivity

3. Making It Responsive

Tailwind’s responsive utilities (md: breakpoint) handle scaling:

text-4xl md:text-6xl: larger titles on desktop
Container spacing using px-6
Buttons scale naturally due to padding

The hero automatically adapts to:

Small mobile screens
Tablets
Wide desktop and TV-like displays

4. Optional Enhancements

Here are optional improvements you can add later:

🔹 Background animation or fade-in
🔹 Auto-play video background (muted trailer style)
🔹 Blur overlays for better legibility
🔹 “Top 10 Today” badge like Netflix

We’ll add some enhancements in later sections.

Add Movie Rows (Horizontal Scroll)

A Netflix-style homepage wouldn’t be complete without horizontally scrollable movie rows. These rows typically contain poster thumbnails that users can browse left-to-right using a mouse, touch, or remote navigation.

In this section, you’ll build a reusable row component with smooth horizontal scrolling, hover animations, and responsive scaling.

1. Basic Scrollable Row Structure

Below your hero section, replace the placeholder movie grid with this horizontally scrollable row:

<!-- Movie Row -->
<section class="py-10">
  <div class="max-w-7xl mx-auto px-6">
    <h2 class="text-2xl font-semibold mb-4">Popular on Netflix</h2>

    <div class="group relative">
      <!-- Scrollable Container -->
      <div class="flex space-x-4 overflow-x-auto scrollbar-hide scroll-smooth pr-6">
        
        <!-- Movie Items -->
        <div class="min-w-[150px] md:min-w-[200px] rounded-md overflow-hidden bg-gray-800 hover:scale-105 transition-transform duration-300 cursor-pointer">
          <img src="https://image.tmdb.org/t/p/w300/1QeOZtPcxr4xFg1l8kdFMvx6bSX.jpg" alt="Poster" class="w-full h-full object-cover" />
        </div>
        
        <div class="min-w-[150px] md:min-w-[200px] rounded-md overflow-hidden bg-gray-800 hover:scale-105 transition-transform duration-300 cursor-pointer">
          <img src="https://image.tmdb.org/t/p/w300/8Y1N91YQ8VE3DybMT0SqnXpress.jpg" alt="Poster" class="w-full h-full object-cover" />
        </div>

        <div class="min-w-[150px] md:min-w-[200px] rounded-md overflow-hidden bg-gray-800 hover:scale-105 transition-transform duration-300 cursor-pointer">
          <img src="https://image.tmdb.org/t/p/w300/jZIYaISP3GBSrVOPfrp98AMa8Ng.jpg" alt="Poster" class="w-full h-full object-cover" />
        </div>

        <!-- Duplicate for demo -->
        <div class="min-w-[150px] md:min-w-[200px] rounded-md overflow-hidden bg-gray-800 hover:scale-105 transition-transform duration-300 cursor-pointer">
          <img src="https://image.tmdb.org/t/p/w300/1QeOZtPcxr4xFg1l8kdFMvx6bSX.jpg" alt="Poster" class="w-full h-full object-cover" />
        </div>

      </div>
    </div>
  </div>
</section>

2. Key Tailwind Classes Explained

Horizontal Scrolling

overflow-x-auto
scroll-smooth
space-x-4
flex

This combination creates a smooth, horizontal scrolling experience similar to Netflix on both mobile and desktop.

Hide Scrollbar

Add this utility to your CSS (Tailwind v4 allows custom CSS without config):

/* Hide scrollbar visually */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

Add it to src/input.css under your Tailwind import.

Movie Item Styling

Each movie box uses:

min-w-[150px] for consistent sizing
rounded-md overflow-hidden for modern edges
hover:scale-105 for zoom animation
transition-transform duration-300 for smooth hover motion

This creates the signature Netflix hover effect.

3. Making Rows Reusable

To make it easy to add more rows later, structure each row like this:

<section class="py-10">
  <div class="max-w-7xl mx-auto px-6">
    <h2 class="text-2xl font-semibold mb-4">Trending Now</h2>
    <div class="group relative">
      <div class="flex space-x-4 overflow-x-auto scrollbar-hide scroll-smooth pr-6">
        <!-- Movie cards here -->
      </div>
    </div>
  </div>
</section>

You can copy this block to create:

Trending Now
Continue Watching
New Releases
Top 10 in Your Country

Simply update the <h2> title and poster URLs.

4. Improve the Interaction Experience (Optional)

Netflix uses left/right arrow buttons that appear when hovering over a row. Here’s a simple Tailwind implementation:

<button class="hidden group-hover:flex absolute left-0 top-1/2 -translate-y-1/2 bg-black/40 p-3 rounded-full backdrop-blur text-white">
  ←
</button>

<button class="hidden group-hover:flex absolute right-0 top-1/2 -translate-y-1/2 bg-black/40 p-3 rounded-full backdrop-blur text-white">
  →
</button>

Place them inside the .group.relative wrapper.

You can later bind them with JavaScript for actual scrolling if needed.

5. Responsiveness

Your movie rows scale beautifully across breakpoints:

Mobile: touch scrolling with minimum-width thumbnails
Tablet: larger thumbnails via md:min-w-[200px]
Desktop: smooth scroll with rows wide enough to feel like Netflix's TV interface

Tailwind’s flexible utilities make the layout fluid without extra CSS media queries.

The footer on Netflix’s homepage is simple, minimalistic, and uses a clean grid of links with low-opacity text. In this section, you’ll build a fully responsive footer using Tailwind CSS utilities, keeping the dark theme consistent with the rest of the layout.

1. Add the Footer Structure

Place this footer at the bottom of your index.html, right after all content sections:

<!-- Footer -->
<footer class="bg-black py-12 mt-16 border-t border-gray-800">
  <div class="max-w-7xl mx-auto px-6 text-gray-400">

    <p class="mb-6">
      Questions? <a href="#" class="underline hover:text-gray-300">Contact us</a>
    </p>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
      <a href="#" class="hover:text-gray-300">FAQ</a>
      <a href="#" class="hover:text-gray-300">Investor Relations</a>
      <a href="#" class="hover:text-gray-300">Ways to Watch</a>
      <a href="#" class="hover:text-gray-300">Corporate Information</a>

      <a href="#" class="hover:text-gray-300">Help Center</a>
      <a href="#" class="hover:text-gray-300">Jobs</a>
      <a href="#" class="hover:text-gray-300">Terms of Use</a>
      <a href="#" class="hover:text-gray-300">Contact Us</a>

      <a href="#" class="hover:text-gray-300">Account</a>
      <a href="#" class="hover:text-gray-300">Redeem Gift Cards</a>
      <a href="#" class="hover:text-gray-300">Privacy</a>
      <a href="#" class="hover:text-gray-300">Speed Test</a>

      <a href="#" class="hover:text-gray-300">Media Center</a>
      <a href="#" class="hover:text-gray-300">Buy Gift Cards</a>
      <a href="#" class="hover:text-gray-300">Cookie Preferences</a>
      <a href="#" class="hover:text-gray-300">Legal Notices</a>
    </div>

    <p class="text-sm">Netflix Clone UI with Tailwind CSS</p>
  </div>
</footer>

2. What Makes This Footer Netflix-Style?

Netflix’s footer follows a few signature design principles:

Dark Background + Low Contrast Text

We use:

bg-black for the background
text-gray-400 for links
hover:text-gray-300 for subtle interaction

This creates the clean, understated Netflix look.

Simple Multi-Column Grid

A responsive grid layout:

grid grid-cols-2 md:grid-cols-4 gap-4

This allows the footer links to:

Stack on mobile
Expand into four columns on larger screens
Stay readable and minimal

Thin Top Border

This class adds a subtle separator:

border-t border-gray-800

It helps visually distinguish the footer from the main content.

Small Legal Text

Netflix keeps the legal line light and simple:

<p class="text-sm">Netflix Clone UI with Tailwind CSS</p>

You can customize this to reflect your app or project.

3. Optional Enhancements

If you want to modernize the footer, consider adding:

🌐 Language selector dropdown
📱 Social media icons using Heroicons or SVGs
🌑 Dark mode toggles (for non-Netflix builds)
🔗 Dynamic footer links generated from JSON

These can make your layout feel more professional if used in a real app.

Make It Responsive for All Screens

Netflix’s interface is designed to work seamlessly across phones, tablets, laptops, and TVs. Tailwind CSS makes this extremely intuitive thanks to its mobile-first utilities and responsive modifiers. In this section, you’ll refine your layout so every component—from the navbar to movie rows—looks polished on all screen sizes.

1. Responsive Navbar Behavior

On mobile, the navigation is hidden to avoid crowding the top bar.
On a desktop, it appears in full.

<nav class="hidden md:flex gap-6">
  <a href="#" class="hover:text-gray-300">Home</a>
  <a href="#" class="hover:text-gray-300">TV Shows</a>
  <a href="#" class="hover:text-gray-300">Movies</a>
  <a href="#" class="hover:text-gray-300">Latest</a>
  <a href="#" class="hover:text-gray-300">My List</a>
</nav>

If you'd like a mobile menu, you can add a hamburger button:

<button class="md:hidden text-white text-2xl">☰</button>

This gives readers a clear upgrade path without complicating the tutorial.

2. Responsive Hero Section

The hero title and layout automatically scale with Tailwind’s responsive utilities:

<h2 class="text-4xl md:text-6xl font-extrabold max-w-xl leading-tight">

text-4xl → default mobile size
md:text-6xl → larger desktop size

Buttons and text blocks follow similar patterns, maintaining readability across all resolutions.

3. Responsive Movie Card Sizes

Using responsive min-width utilities ensures thumbnails resize based on available space:

min-w-[150px] md:min-w-[200px]

This ensures:

Smaller cards on mobile
Larger cinematic thumbnails on desktop
Even spacing and consistent scroll interaction

Scroll behavior is naturally responsive—touch scrolling on mobile and mouse wheel/drag on desktop.

4. Scroll Behavior on Touch & Desktop

No extra code needed—Tailwind uses native browser behavior:

Mobile / tablet: touch-swipe navigation
Desktop: scroll wheel + drag
TV screens: large card sizing works naturally using lg: or xl: breakpoints

If you want to fine-tune scrolling, you can add:

scroll-smooth
snap-x snap-mandatory

But for a Netflix clone, free-scroll is truer to the original UI.

5. Responsive Footer Grid

Netflix’s footer transforms elegantly using a responsive grid:

grid grid-cols-2 md:grid-cols-4 gap-4

This results in:

2 columns on mobile
4 columns on desktop
Clean, minimal spacing

The footer links remain legible without overcrowding.

6. Testing Responsiveness

Here are quick ways readers can test responsiveness:

Resize the browser window
Test on an iOS/Android device
Use Chrome DevTools → Responsive View
Test on a large display for "TV feel"

Your layout should feel:

Smooth and natural
Readable on all screens
Consistent with Netflix’s real UI

Since Tailwind v4 handles so many responsive concerns automatically, you only need minimal custom CSS or breakpoints.

Optional Enhancements

Your Netflix-style homepage is now fully functional and responsive, but there’s plenty of room to enhance the user experience and make the interface feel even more polished. In this section, you’ll explore optional features you can add to elevate the design, improve usability, and create a more immersive media browsing experience.

These enhancements are fully optional, so readers can pick the ones that fit their needs.

1. Add Arrow Buttons for Advanced Scrolling

Netflix uses left/right arrow buttons that appear when hovering over a movie row. You can create this effect using Tailwind utilities:

<button class="hidden group-hover:flex absolute left-0 top-1/2 -translate-y-1/2 bg-black/40 p-3 rounded-full backdrop-blur text-white">
  ←
</button>
<button class="hidden group-hover:flex absolute right-0 top-1/2 -translate-y-1/2 bg-black/40 p-3 rounded-full backdrop-blur text-white">
  →
</button>

To make these buttons actually scroll the row, add a simple JavaScript snippet:

<script>
  const rows = document.querySelectorAll('.row-scroll');

  rows.forEach(row => {
    const btnLeft = row.querySelector('.btn-left');
    const btnRight = row.querySelector('.btn-right');
    const scrollContainer = row.querySelector('.scroll-container');

    btnLeft.addEventListener('click', () => {
      scrollContainer.scrollBy({ left: -300, behavior: 'smooth' });
    });

    btnRight.addEventListener('click', () => {
      scrollContainer.scrollBy({ left: 300, behavior: 'smooth' });
    });
  });
</script>

Users get a more interactive browsing experience similar to Netflix on desktop and TV apps.

2. Add Netflix-Style “Top 10” Badges

You can create ranking labels using Tailwind’s badge-like styles:

<div class="absolute bottom-2 left-2 bg-red-600 text-white px-2 py-1 text-sm font-bold rounded">
  #3
</div>

Position this inside a movie card container.

3. Add Hover Preview Overlays

Netflix often adds overlays when hovering over a title. You can replicate this with opacity transitions:

<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition">
  <div class="absolute bottom-4 left-4">
    <p class="font-semibold">The Witcher</p>
    <button class="mt-2 bg-white text-black px-4 py-2 rounded">▶ Play</button>
  </div>
</div>

This adds a premium, interactive feel.

4. Add Auto-Play Video Previews

You can auto-play a muted trailer video inside a card when hovered — similar to the real Netflix UI:

<video
  class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition"
  autoplay
  loop
  muted
>
  <source src="/videos/witcher-trailer.mp4" type="video/mp4" />
</video>

5. Add Keyboard Navigation

To support keyboard navigation or remote-style interaction:

document.addEventListener('keydown', (e) => {
  const row = document.querySelector('.scroll-container');
  if (e.key === 'ArrowRight') row.scrollBy({ left: 200, behavior: 'smooth' });
  if (e.key === 'ArrowLeft') row.scrollBy({ left: -200, behavior: 'smooth' });
});

Helpful for TV apps or keyboard-driven interfaces.

6. Add Light/Dark Mode (Non-Netflix Enhancement)

If using this design for your own streaming app, you can add Tailwind’s dark mode support:

<html class="dark">

Then style with:

dark:bg-gray-900 dark:text-gray-100

And add a toggle button:

<button onclick="document.documentElement.classList.toggle('dark')">
  🌙
</button>

Netflix itself doesn’t support light mode, but your custom app can.

7. Load Movies Dynamically from an API

For a production-ready clone, load images dynamically:

Example using TheMovieDB (TMDB) API:

fetch("https://api.themoviedb.org/3/trending/all/week?api_key=YOUR_API_KEY")
  .then(res => res.json())
  .then(data => {
    const row = document.querySelector("#trending-row");
    data.results.forEach(movie => {
      const img = document.createElement("img");
      img.src = "https://image.tmdb.org/t/p/w300" + movie.poster_path;
      img.className = "min-w-[150px] md:min-w-[200px] rounded-md hover:scale-105 transition";
      row.appendChild(img);
    });
  });

This transforms your static layout into a dynamic content-driven application.

Conclusion

In this tutorial, you learned how to build a fully responsive Netflix-style homepage using Tailwind CSS. Starting from a simple project setup, you created a modern layout featuring:

A fixed, semi-transparent navigation bar
A cinematic hero section with a background image and gradient overlays
Smooth horizontal movie rows with hover animations
A clean multi-column footer
Consistent responsiveness across mobile, tablet, desktop, and TV-sized screens

Tailwind CSS 4.1 made it easy to style each component with utility classes, ensuring a clean and maintainable codebase without writing large amounts of custom CSS. With the optional enhancements—like arrow-based scrolling, preview overlays, top-10 badges, and dynamic API loading—you now have a strong foundation to build a real streaming UI or enhance this clone even further.

Whether you plan to extend this layout into a full application or simply experiment with modern design concepts, the techniques you've learned here will help you build fast, responsive, and visually appealing interfaces with Tailwind CSS.

You can find the full source code on our GitHub.

That's just the basics. If you need more deep learning about CSS, SASS, SCSS, TailwindCSS, you can take the following cheap course:

Thanks!

Build a Netflix-Style Homepage with Tailwind CSS

Learn how to build a Netflix-style homepage using Tailwind CSS, featuring a hero banner, movie rows, responsive layout, and clean modern UI components.

Table of Contents: