From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

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

Building the contact section

Building the contact section

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Building the contact section

“

Welcome to this session on building a professional Contact Me section for your React Portfolio project. In this session, you'll learn how to create a contact section that displays your contact information, includes a styled contact form, and supports both responsive design and dark mode. Now I am adding some basic styling to our section. I've added padding on the X-axis, left and right, of 4 units, and centered the text within the section. I am replacing the placeholder paragraph and H1 with an H3 tag containing the text Contact Me. This sets up the main heading for our contact section. To enable dark mode support, I am adding background color classes to the section element. BG White sets a white background for light mode, while Dark.BGGrey900 sets a dark gray background for dark mode. Let's style the Contact Me heading. I am adding Tailwind CSS Classes text-4xl font-bold to the h3 tag, which makes the text larger, 4xl and bold. Now I am giving the heading some color. I am adding…

Contents