React Workshop Series

Day 1 — Style the Card

Day 1 · Topic 14 of 15Hands-on practice

Foundations & build/Style the Card

04

Hands-on #04 — Make Your Card Look Good

Hands-on #04

Make Your Card Look Good

Apply the same utility ideas you tested in the Tailwind playground.

Exercise — must have

ProfileCard.js

  • bg-white — clean white card
  • text-gray-800 — readable dark text
  • p-6 — breathing room
  • rounded-xl — soft corners
  • shadow-lg — depth / “card” feel

about/page.js

  • bg-gradient-to-br — diagonal gradient
  • from-blue-50 — light blue start
  • to-indigo-100 — soft indigo end

Bonus points

ProfileCard.js

  • transition-all — animate style changes
  • duration-300 — 300ms smooth feel
  • hover:shadow-2xl — bigger shadow on hover

Image styles (on <Image />)

  • rounded-full — circle photo
  • object-cover — crop nicely, no stretch
  • w-24 h-24 — fixed avatar size
  • shrink-0 — photo won’t get squished
  • ring-4 ring-blue-200 — soft colored ring
  • hover:scale-105 — slight zoom on hover

Copy-paste — ProfileCard with must-have + bonus

src/components/ProfileCard.js
1import Image from "next/image";
2 
3export function ProfileCard({ name, title, desc, imageSrc }) {
4  return (
5    <div className="flex items-center gap-4 rounded-xl bg-white p-6 text-gray-800 shadow-lg transition-all duration-300 hover:shadow-2xl">
6      <Image
7        src={imageSrc}
8        alt={name}
9        width={96}
10        height={96}
11        className="h-24 w-24 shrink-0 rounded-full object-cover ring-4 ring-blue-200 transition-all duration-300 hover:scale-105"
12      />
13 
14      <div>
15        <h2 className="text-xl font-semibold">{name}</h2>
16        <p className="text-gray-600">{title}</p>
17        <p className="mt-1 text-sm">{desc}</p>
18      </div>
19    </div>
20  );
21}

Copy-paste — About page gradient

src/app/about/page.js
1import { ProfileCard } from "@/components/ProfileCard";
2 
3export default function About() {
4  return (
5    <main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-8">
6      <ProfileCard
7        name="Alex"
8        title="Computer Science Student"
9        desc="Learning React and Next.js!"
10        imageSrc="/profile.png"
11      />
12    </main>
13  );
14}

Done when

Your card stays readable, the photo remains circular and unsquashed, and the About page has a clear background with comfortable spacing.