Building Tailwind CSS card components
Zoltán Szőgyényi
Posted on October 5, 2021
Tailwind CSS is a framework that I've been using a lot lately to quickly build websites without having to leave the HTML files.
It is an interesting new approach and there are pros and cons as with any other framework or technology, but I think that everyone should at least give it a try.
One of the disadvantages that I've found is that it does not have a base set of components to work with which would also be solely based on the utility classes.
This is why I started a tutorial series here on dev.to about building the most commonly used web components such as buttons, cards, dropdowns, datepickers, and more.
Last time I wrote about building a button group components with Tailwind CSS and today I want to show you how to build card elements.
Let's get started!
Tailwind CSS card component
I'll show you two different cards in this tutorial:
- a card which is an
<a>tag - a card that has a CTA button inside which is the
<a>tag
We'll first need to write the HTML for the first card.
<a href="#">
<h5>Noteworthy technology acquisitions 2021</h5>
<p>Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</a>
As you can see, the markup is quite simple and straightforward. There's an a tag that wraps up everything with a h5 and p tags inside.
Let's give some style to the card.
<a href="#" class="block p-6 bg-white shadow-md border border-gray-200 rounded-lg max-w-sm">
<h5>Noteworthy technology acquisitions 2021</h5>
<p>Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</a>
Looks pretty good, but the text inside is still unstyled. Let's fix that.
<a href="#" class="block p-6 bg-white shadow-md border border-gray-200 rounded-lg max-w-sm">
<h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</a>
Looking better. Let's also add a hover effect to the card.
<a href="#" class="block p-6 bg-white hover:bg-gray-100 shadow-md border border-gray-200 rounded-lg max-w-sm">
<h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</a>
The final result should look like this:
Look pretty neat! But this card has only text. I want to show you how to build a classic blog card that you can use to link to articles.
Tailwind CSS card with image
Let's first start with the HTML.
<div>
<a href="#">
<img src="https://flowbite.com/docs/images/blog/image-1.jpg" alt="">
</a>
<div>
<a href="#">
<h5>Noteworthy technology acquisitions 2021</h5>
</a>
<p>Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#">
Read more
</a>
</div>
</div>
As you can see we've added multiple '' tags on the image, title, and the read more button. Nothing is styled yet, so let's start with the card styles.
<div class="bg-white shadow-md border border-gray-200 rounded-lg max-w-sm">
<a href="#">
<img src="https://flowbite.com/docs/images/blog/image-1.jpg" alt="">
</a>
<div class="p-5">
<a href="#">
<h5>Noteworthy technology acquisitions 2021</h5>
</a>
<p>Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#">
Read more
</a>
</div>
</div>
Looking better. Let's now give some style to the text elements.
<div class="bg-white shadow-md border border-gray-200 rounded-lg max-w-sm">
<a href="#">
<img src="https://flowbite.com/docs/images/blog/image-1.jpg" alt="">
</a>
<div class="p-5">
<a href="#">
<h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="font-normal text-gray-700 mb-3">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#">
Read more
</a>
</div>
</div>
Let's also make the image rounded.
<div class="bg-white shadow-md border border-gray-200 rounded-lg max-w-sm">
<a href="#">
<img class="rounded-t-lg" src="https://flowbite.com/docs/images/blog/image-1.jpg" alt="">
</a>
<div class="p-5">
<a href="#">
<h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="font-normal text-gray-700 mb-3">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#">
Read more
</a>
</div>
</div>
Now let's also make that read more button look like one.
<div class="bg-white shadow-md border border-gray-200 rounded-lg max-w-sm">
<a href="#">
<img class="rounded-t-lg" src="https://flowbite.com/docs/images/blog/image-1.jpg" alt="">
</a>
<div class="p-5">
<a href="#">
<h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="font-normal text-gray-700 mb-3">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center" href="#">
Read more
</a>
</div>
</div>
The final result should look like this:
Awesome. I hope that you liked this tutorial and that it will help you with your project and Tailwind CSS journey.
Flowbite - Tailwind CSS component library
This Tailwind CSS card component is part of a larger and open-source component library built with Tailwind CSS utility classes called Flowbite.
You can learn more about the library and how to get started by checking out the official documentation of Flowbite or by checking out the Github repository.
Posted on October 5, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related