DEV Community

loading...

Simple Profile Card using Tailwind

Dendi Handian
I am that backend programmer who doesn't return 200 OK for errors and doesn't write only POST method for all endpoints.
・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)