Tailwind CSS Card Tutorial

A card is a very common component nowadays in a web application. In this tutorial, we will demonstrate how to make a simple card using Tailwind CSS.

Our card component's look and feel is similar to the component below:

Copy the HTML code for the Tailwind CSS card above:

<div class="flex flex-col space-y-2 p-2 w-80 border border-gray-300 rounded">
    <img src="images/avatar.jpg"/>
    <p class="text-lg font-black">Designer</p>
    <p class="text-md ">Based in United State</p>
    <div class="py-2">
        <a href="#"
           class="text-sm py-2 px-4 border border-gray-100 bg-gray-50 hover:bg-gray-600 hover:border-gray-600 hover:text-white rounded">Hire
            Me</a>
    </div>
</div>

We are using a container div with flexbox to holder its children. Flexbox makes it very easy to control the space and alignment of the chilren elements.

The content of the parent div is pretty straightforward. We have an img for the photo shot. Two p elements for the text. And lastly a a tag for a button link.