From the course: Master React 19, Build Ecommerce Solutions, and Prepare for Interviews with TypeScript, Next.js, and Remix

Unlock this course with a free trial

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

Creating card for email verification

Creating card for email verification

From the course: Master React 19, Build Ecommerce Solutions, and Prepare for Interviews with TypeScript, Next.js, and Remix

Start my 1-month free trial Buy for my team

Creating card for email verification

“

In this lecture, we are going to create a clean and styled card layout and inside that we will add an input field to accept the user's e-mail. So let's start by creating a card. We'll wrap the h1 tag with a div and now I will add some tailwind utility classes to this division so border border gray 50 padding 8 shadow large and finally rounded LG for smooth and rounded corners let's save the code and check the output and the card structure is created now I want to increase the width of this card to make it look more spacious so I will add width full for full width and max width md to limit its maximum width to a medium size. Let's save and check again and the width of the card is increased. But if you notice, the title inside the card is left aligned. Let's fix that by simply adding the text center utility to the h1 tag and the title is aligned in the center of the card. All right, let's move on and create a form for the e-mail verification process. This form will have just one input…

Contents