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>
Top comments (0)