DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Let's build Hulu clone with Next.js & Tailwind
Muhammad  Ahmad
Muhammad Ahmad

Posted on

Let's build Hulu clone with Next.js & Tailwind

I'll be creating a Hulu webpage clone with Next.js and Tailwind.

Live demo: hulu-clone-live
Github repo: hulu-clone-repo

Breaking down the layout of webpage to 6 main sections.

  • Header
  • Sub header
  • Categories
  • Live
  • Live sports
  • Footer

1. Setup the Project

Create a Next.js app

yarn create next-app --typescript
Enter fullscreen mode Exit fullscreen mode

Install tailwind and configure it

yarn add tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

2. Sections

Header

header

    <header className="header h-530 bg-header-img bg-cover bg-no-repeat bg-center">
       <nav className="relative flex justify-end z-20 px-8 py-6">
          <ul>
            <li>
              <button className="text-white font-bold border-0 bg-none uppercase tracking-widest cursor-pointer">
                Log In
              </button>
            </li>
          </ul>
       </nav>
       <div className="flex flex-col justify-start items-center mt-10 text-white space-y-6">
          <h4 className="uppercase text-sm text-hulu-green font-bold">
            Try up to one month free
          </h4>
          <img
            src="/logo.png"
            alt="Hulu"
            className="w-200 md:w-270 m-auto m-2"
          />
          <div className="font-bold text-2xl text-center">
            Watch thousands of TV shows and movies.
          </div>
          <div className="hidden md:block text-lg">
            HBO Maxโ„ข, SHOWTIMEยฎ, CINEMAXยฎ and STARZยฎ available as add-ons.
          </div>
          <button className="bg-white text-gray-800 px-8 py-5 text-md font-semibold border-0 rounded-md cursor-pointer uppercase tracking-wide leading-3 hover:opacity-80">
            Start Your Free Trial
          </button>
          <div className="text-xs text-gray-200">
            Free trial for new & eligible returning subscribers only.
          </div>
       </div>
    </header>
Enter fullscreen mode Exit fullscreen mode

Sub-header

sub-header

      <section className="grid grid-cols-1 md:grid-cols-3 gap-8 items-center px-8 py-6 bg-gradient-to-l from-cstart via-cvia to-cend text-white">
        <img
          src="/logos.png"
          alt=""
          className="block w-250 md:w-full m-auto md:m-0"
        />
        <div className="space-y-3 text-center md:text-left">
          <h4 className="uppercase text-sm text-hulu-green font-bold">
            Bundle with any Hulu plan & save
          </h4>
          <h3 className="text-3xl font-light">Get Hulu, Disney+, and ESPN+.</h3>
          <a href="#" className="block text-gray-300 text-xs underline">
            Details
          </a>
        </div>
        <div className="justify-self-center md:justify-self-end space-y-3">
          <a
            href="#"
            className="block bg-transparent text-white px-8 py-5 text-md font-semibold border-2 border-white rounded-md cursor-pointer uppercase tracking-wide leading-3 hover:opacity-80"
          >
            Get Bundle
          </a>
          <a
            href="#"
            className="block text-center text-gray-300 text-xs underline"
          >
            Terms apply
          </a>
        </div>
      </section>
Enter fullscreen mode Exit fullscreen mode

Categories

categories

      <section className="flex flex-col text-center justify-items-center items-center px-16 py-20 text-white bg-black">
        <h4 className="uppercase text-sm text-hulu-green font-bold">
          Included in all plans
        </h4>
        <div className="font-bold text-5xl md:text-7xl mt-6">
          All The TV You Love
        </div>
        <div className="text-xl md:text-2xl max-w-3xl mt-6">
          Stream full seasons of exclusive series, current-season episodes, hit
          movies, Hulu Originals, kids shows, and more.
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8 mt-14">
          <div className="h-500 w-300 relative bg-cover1-img bg-cover bg-no-repeat bg-center">
            <div className="cover-grad absolute h-full w-full top-0 left-0"></div>
            <div className="absolute top-5 left-5 text-left">
              <div className="sub-title">Past & Current Seasons</div>
              <h3 className="font-light text-2xl">TV Shows</h3>
            </div>
          </div>
          <div className="h-500 w-300 relative bg-cover2-img bg-cover bg-no-repeat bg-center">
            <div className="cover-grad absolute h-full w-full top-0 left-0"></div>
            <div className="absolute top-5 left-5 text-left">
              <div className="sub-title">New & Classics</div>
              <h3 className="font-light text-2xl">Movies</h3>
            </div>
          </div>
          <div className="h-500 w-300 relative bg-cover3-img bg-cover bg-no-repeat bg-center">
            <div className="cover-grad absolute h-full w-full top-0 left-0"></div>
            <div className="absolute top-5 left-5 text-left">
              <div className="sub-title">Groundbreaking</div>
              <h3 className="font-light text-2xl">Hulu Originals</h3>
            </div>
          </div>
          <div className="h-500 w-300 relative bg-cover4-img bg-cover bg-no-repeat bg-center">
            <div className="cover-grad absolute h-full w-full top-0 left-0"></div>
            <div className="absolute top-5 left-5 text-left">
              <div className="sub-title">Add-On</div>
              <h3 className="font-light text-2xl">Premiums</h3>
            </div>
          </div>
        </div>
      </section>
Enter fullscreen mode Exit fullscreen mode

Live

live

      <section className="px-10 py-10 bg-live-section text-white">
        <div className="flex flex-col items-center justify-center text-center border-4 border-hulu-green rounded-2xl px-10 py-8 md:p-28 space-y-7">
          <h4 className="uppercase text-sm text-hulu-green font-bold">
            Hulu + Live TV
          </h4>
          <div className="font-bold text-4xl md:text-7xl">
            Live TV Makes It Better
          </div>
          <div className="text-xl md:text-2xl max-w-3xl">
            Make the switch from cable. Get 75+ top channels with your favorite
            live sports, news, and events - plus the entire Hulu streaming
            library.
          </div>
          <div className="text-gray-300 text-xs">
            Live TV plan required. Regional restrictions, blackouts and
            additional terms apply. See details
          </div>
          <a href="#" className="uppercase underline">
            View Channels in Your Area
          </a>
        </div>
      </section>
Enter fullscreen mode Exit fullscreen mode

Live sports

live sports

      <section className="h-800 relative bg-livesport-small md:bg-livesport-img bg-cover bg-no-repeat bg-center text-white">
        <div className="absolute max-w-550 top-28 left-6 md:top-160 md:left-100 space-y-7">
          <div className="font-bold text-5xl md:text-7xl">Live Sports</div>
          <div className="text-2xl max-w-2xl">
            Catch your games at home or on the go. Stream live games from major
            college and pro leagues including the NCAAยฎ, NBA, NHL, NFL, and
            more.
          </div>

          <div className="flex items-center justify-between w-300 space-x-5">
            <div className="flex justify-center items-center h-16 w-16 relative bg-network-logo bg-cover bg-no-repeat bg-center">
              <img src="/live-sports-logo-1.png" alt="" className="w-10" />
            </div>
            <div className="flex justify-center items-center h-16 w-16 relative bg-network-logo bg-cover bg-no-repeat bg-center">
              <img src="/live-sports-logo-2.png" alt="" className="w-10" />
            </div>
            <div className="flex justify-center items-center h-16 w-16 relative bg-network-logo bg-cover bg-no-repeat bg-center">
              <img src="/live-sports-logo-3.svg" alt="" className="w-10" />
            </div>
            <div className="flex justify-center items-center h-16 w-16 relative bg-network-logo bg-cover bg-no-repeat bg-center">
              <img src="/live-sports-logo-4.png" alt="" className="w-10" />
            </div>
          </div>

          <div className="text-gray-300 text-xs">
            Live TV plan required. Regional restrictions, blackouts and
            additional terms apply. See details
          </div>
        </div>
      </section>
Enter fullscreen mode Exit fullscreen mode

Footer

footer

      <footer className="bg-gray-200 text-black">
        <div className="p-10 max-w-1100 m-auto">
          <div className="flex flex-col md:flex-row justify-between">
            <ul>
              <li className="uppercase font-bold mb-3">BROWSE</li>
              <li>
                <a href="#">Streaming Library</a>
              </li>
              <li>
                <a href="#">Live TV</a>
              </li>
              <li>
                <a href="#">Live News</a>
              </li>
              <li>
                <a href="#">Live Sports</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="#">TV Shows</a>
              </li>
              <li>
                <a href="#">Movies</a>
              </li>
              <li>
                <a href="#">Originals</a>
              </li>
              <li>
                <a href="#">Networks</a>
              </li>
              <li>
                <a href="#">Kids</a>
              </li>
              <li>
                <a href="#">FX on Hulu</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="#">Hulu, Disney+, and ESPN+</a>
              </li>
              <li>
                <a href="#">Disney Bundle</a>
              </li>
              <li>
                <a href="#">HBO Max</a>
              </li>
              <li>
                <a href="#">Cinimax</a>
              </li>
              <li>
                <a href="#">Showtime</a>
              </li>
              <li>
                <a href="#">STARZ</a>
              </li>
            </ul>
            <ul>
              <li className="uppercase font-bold mb-3">HELP</li>
              <li>
                <a href="#">Account & Billing</a>
              </li>
              <li>
                <a href="#">Plans & Pricing</a>
              </li>
              <li>
                <a href="#">Supported Devices</a>
              </li>
              <li>
                <a href="#">Accesibility</a>
              </li>
            </ul>
            <ul>
              <li className="uppercase font-bold mb-3">ABOUT US</li>
              <li>
                <a href="#">Press</a>
              </li>
              <li>
                <a href="#">Jobs</a>
              </li>
              <li>
                <a href="#">Contact</a>
              </li>
            </ul>
          </div>
          <hr className="my-7 border-gray-400" />
          <div className="flex items-center">
            <a href="#">
              <img src="/facebook.svg" alt="" className="w-6 h-6 mr-6" />
            </a>
            <a href="#">
              <img src="/twitter.svg" alt="" className="w-6 h-6 mr-6" />
            </a>
            <a href="#">
              <img src="/youtube.svg" alt="" className="w-6 h-6 mr-6" />
            </a>
            <a href="#">
              <img src="/instagram.svg" alt="" className="w-6 h-6" />
            </a>
          </div>
        </div>
      </footer>
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
aligerm profile image
Ali

Great work.

Collapse
 
jdgamble555 profile image
Jonathan Gamble

I think people really want to see the image carousel.

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.