Your First Styled Page

Build a centered profile card with image, heading, text, and button using only Tailwind utilities.

4 min read Level 1/5 #tailwind#basics

What you'll learn

Lay out content with flex utilities
Apply spacing, color, radius, and shadow
Make the result look intentional

Enough theory — let’s build something real. We will assemble a centered profile card using nothing but utilities, one decision at a time.

The Shell

Start with a container that is centered, capped in width, and visually lifted off the page:

<div class="max-w-sm mx-auto rounded-xl border bg-white p-6 shadow-md">
  <!-- content goes here -->
</div>

Each class is one decision: max-w-sm caps the width, mx-auto centers it horizontally, p-6 gives breathing room, and shadow-md separates it from the background.

The Content

Add an avatar, a name, and a role. flex plus items-center aligns them on one row:

<div class="flex items-center gap-4">
  <img class="size-14 rounded-full object-cover" src="/avatar.jpg" alt="" />
  <div>
    <h2 class="text-lg font-semibold text-gray-900">Grace Hopper</h2>
    <p class="text-sm text-gray-500">Distinguished Engineer</p>
  </div>
</div>

Note size-14 (width and height in one), rounded-full for the circle, and object-cover so the photo fills without distortion.

The Action

Finish with a button that reacts to hover:

<button class="mt-6 w-full rounded-md bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700">
  Follow
</button>

mt-6 spaces it below, w-full makes it full width, and hover:bg-blue-700 darkens it on hover — an interaction handled entirely in the class list.

That is a polished, accessible component with zero custom CSS. Every visual choice is readable right next to the markup it affects.

Anatomy of a Utility Class →