From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Responsive user card explanation

Responsive user card explanation

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Responsive user card explanation

“

Welcome back. Let's start off with our responsive user card component. We'll build a user profile card that looks great on all screen sizes. That's objective number one. We will be using Tailwind CSS utility classes for layout and the styling purposes. We'll apply what we learned in the previous lessons, that is, the responsive design and utility for CSS. The key features of this user cart will include a profile picture, user's name and title, a contact or action button, for example, follow or message. The responsive behavior of the card will be as follows. It will be stacked vertically on mobile. The card should be showing up in a vertical stack behavior when using in small screen sizes and it will be a horizontal layout for the desktop view. At the end, let's see what we'll practice. We will be practicing layout with flex, max-width, defining MX autos and responsive classes like flex. We'll see how we can work with images, text and buttons in React and in contrast with Tailwind…

Contents