Simple Profile Card using Tailwind

We will try create a simple profile card component that consist an image section of the people covering 3/4 height of card from top to bottom and remaining 1/4 for the text section for the name and the role. Let's open https://play.tailwindcss.com/ to play this.

Base Canvas

We will wrap the card later within this element that center any element inside it:

<div class="min-h-screen flex justify-center items-center">
</div>

Base Card

The card component base that has w-48 width, h-64 height and all edges rounded rounded-xl and has bg-gray-200 background color for the visibility.

<div class="min-h-screen flex justify-center items-center">
  <div class="w-48 h-64 rounded-xl bg-gray-200">
  </div>
</div>

Adding Flex and Column Direction to the Card

On the card base, we add flex display and make it flex-col so we can create two element inside that start from top to bottom for image and text section later.

<div class="min-h-screen flex justify-center items-center">
  <div class="w-48 h-64 rounded-xl bg-gray-200 flex flex-col">
  </div>
</div>

Adding Image Section

Inside the card base, we add an image element with the w-auto auto width of the parent, make it rounded like the base card but only on top edges rounded-t-xl. For the image source, we use our github profile image link.

<div class="min-h-screen flex justify-center items-center">
  <div class="w-48 h-64 rounded-xl bg-gray-200 flex flex-col">
    <img class="w-auto rounded-t-xl" src="https://avatars.githubusercontent.com/u/16485031?v=4" alt="avatar" />
  </div>
</div>

Adding Text Section

Then below the image, there is an element that contains two text. the element wraps the text with flex, makes them start from top to bottom with flex-col, center them with text-center, and has padding p-2 to keep them off from the image. The first text has font-bold with the base size of current screen text-base, and the second text is smaller with text-xs and emphasized with italic.

<div class="min-h-screen flex justify-center items-center">
  <div class="w-48 h-64 rounded-xl bg-gray-200 flex flex-col">
    <img class="w-auto rounded-t-xl" src="https://avatars.githubusercontent.com/u/16485031?v=4" alt="avatar" />
    <div class="text-center flex flex-col p-2">
      <span class="text-base font-bold">Dendi Handian</span>
      <span class="text-xs italic">Software Engineer</span>
    </div>
  </div>
</div>

Adding Shadow

To make it less flat, we add shadow to the card.

<div class="min-h-screen flex justify-center items-center">
  <div class="w-48 h-64 rounded-xl bg-gray-200 flex flex-col shadow">
    <img class="w-auto rounded-t-xl" src="https://avatars.githubusercontent.com/u/16485031?v=4" alt="avatar" />
    <div class="text-center flex flex-col p-2">
      <span class="text-base font-bold">Dendi Handian</span>
      <span class="text-xs italic">Software Engineer</span>
    </div>
  </div>
</div>