Zero to Hero: Tailwind Edition Part 2

In the previous post, we learnt about the basics and working of the Tailwind CSS. We will take the practice forward from here and explore more utility classes in this post. About this blog, we will be designing a card component and

Card Component:

Card Component

This component consists of various child components like card title, member list, progress meter and card image.
To get started, we will have a parent div to define the outline of the card and styling of it.’

<div class="flex justify-center items-center p-10 bg-gray-400">
<div class="relative bg-white py-6 px-6 rounded-3xl w-64 my-4 shadow-xl">
</div>
</div>

The basic layout of the card looks something like the picture above, we have used a parent div to centralize our card and used bg-gray-400 to demonstrate the shadow class of our card. We will continue to add other components so that card looks more complete

<div class="flex justify-center items-center p-10 bg-gray-400">
<div class="relative bg-white py-6 px-6 rounded-3xl w-64 my-4 shadow-xl">
<div class=" text-white flex items-center absolute rounded-full py-4 px-4 shadow-xl bg-pink-500 left-4 -top-6">
<!-- svg  -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</div>
<div class="mt-8">
<p class="text-xl font-semibold my-2">App Development</p>
<div class="flex space-x-2 text-gray-400 text-sm">
<!-- svg  -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<p>Marketing Team</p>
</div>
<div class="flex space-x-2 text-gray-400 text-sm my-3">
<!-- svg  -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<p>1 Weeks Left</p>
</div>
</div>
</div>
</div>

After adding the card title and card image, the card component is halfway through its completion. Some utility classes used in the card component:

• relative: using in the parent gives the ability to position the child components like the pink card image in our card component.
• shadow-xl: gives shadow to our card component and enhances it more.
• absolute: this class gives us the ability to place the child anywhere relative to the parent tag. The pink card image <div> has the absolute tag and hence we can place it anywhere inside the parent tag with any specific position.
• left-4: positions the element towards 1 rem left.
• -top-6: positions the element towards -1.5rem top.
• text-sm: changes the text size to small or 0.875 rem.
• my-2: Margins 0.5 rem from top and bottom.
• w-64: gives the width of 16 rem.
• border-t-2: gives border-top width of 2px

Finalizing the card component:

<div class="flex justify-center items-center p-10 bg-gray-400">
<div class="relative bg-white py-6 px-6 rounded-3xl w-64 my-4 shadow-xl">
<div class=" text-white flex items-center absolute rounded-full py-4 px-4 shadow-xl bg-pink-500 left-4 -top-6">
<!-- svg  -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</div>
<div class="mt-8">
<p class="text-xl font-semibold my-2">App Development</p>
<div class="flex space-x-2 text-gray-400 text-sm">
<!-- svg  -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<p>Marketing Team</p>
</div>
<div class="flex space-x-2 text-gray-400 text-sm my-3">
<!-- svg  -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<p>1 Weeks Left</p>
</div>
<div class="border-t-2"></div>
<div class="flex justify-between">
<div class="my-2">
<p class="font-semibold text-base mb-2">Team Member</p>
<div class="flex space-x-2">
<img src="https://randomuser.me/api/portraits/men/44.jpg"
class="w-6 h-6 rounded-full"/>
<img src="https://randomuser.me/api/portraits/men/45.jpg"
class="w-6 h-6 rounded-full"/>
<img src="https://randomuser.me/api/portraits/men/46.jpg"
class="w-6 h-6 rounded-full"/>
</div>
</div>
<div class="my-2">
<p class="font-semibold text-base mb-2">Progress</p>
<div class="text-base text-gray-400 font-semibold">
<p>34%</p>
</div>
</div>
</div>
</div>
</div>
</div>

This blog will help you create custom-designed cards and use the various utility classes and design your own components with it.
For your reference to the documentation and guide to other utility classes, follow this link.