Published on

Practical Guide: Create A Netflix - Quem Está Assistindo?/Who's Watching? With Tailwind CSS

Tags
Netflix - Quem está assistindo?/Who's watching?

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to quickly style their websites without having to write custom CSS. It provides a set of pre-defined classes that can be used to style HTML elements. Tailwind CSS is gaining popularity among developers because of its simplicity, flexibility, and ease of use.

The description of Netflix - Quem está assistindo?/Who's watching? ui component

Netflix - Quem está assistindo?/Who's watching? is a UI component that allows users to switch between different profiles on Netflix. It is a simple and intuitive component that displays the profile pictures of all the users who have access to the account. When a user clicks on their profile picture, they are taken to their personalized Netflix homepage.

Why use Tailwind CSS to create a Netflix - Quem está assistindo?/Who's watching? ui component?

Tailwind CSS is the perfect choice for creating the Netflix - Quem está assistindo?/Who's watching? UI component because it provides a set of pre-defined classes that can be used to style the component quickly and easily. The utility-first approach of Tailwind CSS makes it easy to create custom designs without having to write custom CSS. Additionally, Tailwind CSS is highly customizable, making it easy to match the design of the Netflix - Quem está assistindo?/Who's watching? component.

The preview of Netflix - Quem está assistindo?/Who's watching? ui component.

The Netflix - Quem está assistindo?/Who's watching? UI component is a simple and intuitive component that displays the profile pictures of all the users who have access to the account. When a user clicks on their profile picture, they are taken to their personalized Netflix homepage.

Free download of the Netflix - Quem está assistindo?/Who's watching?'s source code

The source code of Netflix - Quem está assistindo?/Who's watching? ui component.

The source code for the Netflix - Quem está assistindo?/Who's watching? UI component is relatively simple and can be created using HTML and CSS. The HTML code defines the structure of the component, while the CSS code is used to style the component.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="min-h-screen w-full select-none md:place-items-start bg-gradient-to-b from-gray-800 to-black px-20 py-10 align-middle justify-center">
  <div class="w-full grid place-items-center md:place-items-start">
    <img class="w-40 inline-block" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/2560px-Netflix_2015_logo.svg.png" />
  </div>
  <div class="w-full grid place-items-center mt-10">
    <p class="text-white text-3xl md:text-6xl font-normal text-center">Quem está assistindo?</p>
    <div class="flex flex-wrap w-full gap-x-10 gap-y-16 mt-20 justify-center text-center">
      <div class="w-44 h-44 pt-2 rounded-lg hover:border-4 cursor-pointer bg-[url(https://i.pinimg.com/474x/b6/77/cd/b677cd1cde292f261166533d6fe75872.jpg)] bg-cover">
        <p class="text-gray-300 text-xl md:text-2xl mt-44">Usuário</p>
      </div>
      <div class="w-44 h-44 pt-2 rounded-lg hover:border-4 cursor-pointer bg-[url(https://i.pinimg.com/originals/2b/90/0d/2b900d5612554cd0b5edf7d8e848c3ea.png)] bg-cover">
        <p class="text-gray-300 text-xl md:text-2xl mt-44">Usuário</p>
      </div>
      <div class="w-44 h-44 pt-2 rounded-lg hover:border-4 cursor-pointer bg-[url(https://i.pinimg.com/474x/e3/94/30/e39430434d2b8207188f880ac66c6411.jpg)] bg-cover">
        <p class="text-gray-300 text-xl md:text-2xl mt-44">Usuário</p>
      </div>
      <div class="w-44 h-44 pt-2 rounded-lg hover:border-4 cursor-pointer bg-[url(https://i.pinimg.com/originals/bd/ee/4c/bdee4c328550aaf21aa9f43fd19e2136.png)] bg-cover">
        <p class="text-gray-300 text-xl md:text-2xl mt-44">Usuário</p>
      </div>
      <div class="w-44 h-44 pt-2 rounded-lg hover:border-4 cursor-pointer bg-[url(https://pbs.twimg.com/profile_images/1356333120992149505/-qvakEK7_400x400.jpg)] bg-cover">
        <p class="text-gray-300 text-xl md:text-2xl mt-44">Usuário</p>
      </div>
    </div>
    <button class="border-2 inline-block mt-20 md:mt-36 border-gray-600 font-thin text-gray-400 text-xl md:text-2xl px-8 py-2">Gerenciar perfis</button>
  </div>
</div>
</body>
</html>

How to create a Netflix - Quem está assistindo?/Who's watching? with Tailwind CSS?

To create a Netflix - Quem está assistindo?/Who's watching? UI component with Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the basic structure of the component. The component consists of a container that holds the profile pictures of all the users who have access to the account. Each profile picture is a clickable element that takes the user to their personalized Netflix homepage.
<div class="flex justify-center">
  <div class="flex flex-wrap justify-center">
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-gray-300"></a>
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-gray-300"></a>
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-gray-300"></a>
  </div>
</div>
  1. Add the Tailwind CSS CDN to the head of your HTML file. This will allow you to use Tailwind CSS classes in your HTML code.
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
  1. Style the component using Tailwind CSS classes. The flex and justify-center classes are used to center the container horizontally. The flex-wrap class is used to wrap the profile pictures onto multiple lines if necessary. The w-24 and h-24 classes are used to set the width and height of the profile pictures. The m-2 class is used to add margin between the profile pictures. The rounded-full class is used to make the profile pictures circular. The bg-gray-300 class is used to set the background color of the profile pictures to gray.
<div class="flex justify-center">
  <div class="flex flex-wrap justify-center">
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-gray-300"></a>
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-gray-300"></a>
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-gray-300"></a>
  </div>
</div>
  1. Add the profile pictures to the component by replacing the bg-gray-300 class with the bg-cover and bg-center classes, and adding the style attribute with the background-image property.
<div class="flex justify-center">
  <div class="flex flex-wrap justify-center">
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-cover bg-center" style="background-image: url('https://via.placeholder.com/150')"></a>
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-cover bg-center" style="background-image: url('https://via.placeholder.com/150')"></a>
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-cover bg-center" style="background-image: url('https://via.placeholder.com/150')"></a>
  </div>
</div>
  1. Replace the style attribute with a data-src attribute and add the lazyload class to the profile pictures. This will allow the profile pictures to be loaded lazily, improving the performance of the component.
<div class="flex justify-center">
  <div class="flex flex-wrap justify-center">
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-cover bg-center lazyload" data-src="https://via.placeholder.com/150"></a>
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-cover bg-center lazyload" data-src="https://via.placeholder.com/150"></a>
    <a href="#" class="w-24 h-24 m-2 rounded-full bg-cover bg-center lazyload" data-src="https://via.placeholder.com/150"></a>
  </div>
</div>
  1. Add a JavaScript library to the head of your HTML file to enable lazy loading of the profile pictures.
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
</head>
  1. Save the HTML file and open it in a web browser to see the Netflix - Quem está assistindo?/Who's watching? UI component in action.
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
</head>
<body>
  <div class="flex justify-center">
    <div class="flex flex-wrap justify-center">
      <a href="#" class="w-24 h-24 m-2 rounded-full bg-cover bg-center lazyload" data-src="https://via.placeholder.com/150"></a>
      <a href="#" class="w-24 h-24 m-2 rounded-full bg-cover bg-center lazyload" data-src="https://via.placeholder.com/150"></a>
      <a href="#" class="w-24 h-24 m-2 rounded-full bg-cover bg-center lazyload" data-src="https://via.placeholder.com/150"></a>
    </div>
  </div>
</body>
</html>

Conclusion

In this article, we have learned how to create a Netflix - Quem está assistindo?/Who's watching? UI component using Tailwind CSS. Tailwind CSS provides a set of pre-defined classes that can be used to style the component quickly and easily. Additionally, Tailwind CSS is highly customizable, making it easy to match the design of the Netflix - Quem está assistindo?/Who's watching? component. By following the steps outlined in this article, you can create your own Netflix - Quem está assistindo?/Who's watching? UI component in no time.